使用按钮滑动的jQuery

我需要在屏幕右侧有一个div，它可以滑动到更大的尺寸并停止。这当然朝向屏幕的左侧。 之后，我需要能够再次单击相同的div，使其变小。 我应该可以无限地做到这一点

现在我可以让div越来越大，越来越小，但它不会停止。所以我刚拍了一部动画，但是div的内容一闪而过

$(document).ready(function() {



$("#clickdiv").click(function () {            

$("#clickdiv").animate({'width': 2129},800);

});

$("#clickdiv").click(function(){
$(this).animate({'width': 36},800);
});


});

不要使用两个单击侦听器，请使用一个并检查应发生的动画

var large = false;
$("#clickdiv").click(function () {
    if(large = !large) {
        $(this).animate({'width': 2129}, 800);
    } else {
        $(this).animate({'width': 36}, 800);
    }
});

---

而且是一把小提琴。

您可以尝试一下translateZ transform css规则，例如：

.your_div_class_to_get_bigger {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
  transition: all ease-in-out .150s;
}

你必须在你的OnCutter中添加Cube“You-DigiID”、You-DiViCasyToGuthGEIGHOLD并考虑使用。第二次单击时：

('#your_div_id').on('click', function() {
  if($(this).hasClass('your_div_class_to_get_bigger')) {
    $(this).removeClass('your_div_class_to_get_bigger');
  } else {
    $(this).addClass('your_div_class_to_get_bigger');
  }
});

我认为你必须调整一些其他CSS

我举了一个例子：frontpage滑块，在悬停时而不是单击时

---

祝你好运

试试这样的东西

$(document).ready(function() {
    var i=0;
    $("#clickdiv").click(function() {
        i=i===2129?36:2129;
        $(this).animate({width:i}, 800);
    });
});

不需要两个听者，只需要切换宽度。

如果你不喜欢阅读解释，你可以用小提琴

问题 代码的问题在于，将两个不同的事件处理程序附加到同一个单击事件，并且它们在每次单击时都不会运行。如果我合并事件处理程序，问题会变得更明显：

$("#clickdiv").click(function () {            
    $("#clickdiv").animate({'width': 2129},800);
    $(this).animate({'width': 36},800);
});

每次单击时，将动画设置为2129宽度，并将动画设置回36宽度。这显然不是你想做的

您需要以某种方式检查当前状态是否为当前宽或窄？，并相应地执行某些操作

解决方案 使用jQuery切换某种样式的一种优雅方式是。 这将检查元素上是否存在类，并相应地添加和删除它

首先，您必须设置css样式，例如：

#clickdiv {
    width: 36px;
}

#clickdiv.longer {
    width: 2129px;
}

然后，您可以拨打：

$('#clickdiv').click(function () {
    $(this).toggleClass('longer');
});

当然，添加类在默认情况下不会设置动画，但这可以通过启用CSS3转换来解决：

#clickdiv {
    transition: all ease-in-out .5s;
}

这种溶液非常干净。最小管道代码和CSS3转换看起来很不错

作为CSS3的替代方案，您可以使用，它具有启用动画的参数。这要求您还包括jQuery UI，并按如下方式修改JS代码：

$('#clickdiv').on('click', function () {
    $('#clickdiv').toggleClass('longer', 500);
});

请注意toggleClass的最后一个新参数

CSS转换可以测试

---

jQuery UI版本可以测试。

您可以在您正在进行的工作中添加JSFIDLE链接吗：这将是对的合法使用。这将简化JS代码。