转动 .animate({"left": "+=50px"}, "slow");功能变成左右切换答案

【问题标题】：turning an .animate({"left": "+=50px"}, "slow"); function into a toggel left - right转动 .animate({"left": "+=50px"}, "slow");功能变成左右切换
【发布时间】：2012-08-02 20:05:32
【问题描述】：

我在弄清楚如何将 .animate left 函数转换为切换动画函数时遇到了一点麻烦，即单击一次向左动画，再次单击向右动画。

我现在使用的jquery是

$("#right").click(function(){
  $("#img-slider").animate({"left": "+=50px"}, "slow");
});

我尝试将 .animate 更改为 .toggle，但它似乎不起作用，我不知道为什么，非常感谢任何帮助！

【问题讨论】：

您可以使用data() 保存状态，然后根据该数据执行任何操作。

标签： jquery jquery-ui jquery-animate toggle

【解决方案1】：

尝试类似：

var goRight = true;
$("#right").click(function () {
    $("#img-slider").animate({left: goRight ? "+=50px" : "-=50px"}, "slow");
    goRight = !goRight;
});

【讨论】：

【解决方案2】：

.toggle 可以替换 .click，而不是 .animate。不过，这有点冗长。

$("#right").toggle(function () {
  $("#img-slider").animate({"left": "+=50px"}, "slow");
}, function () {
  $("#img-slider").animate({"left": "-=50px"}, "slow");
});

另外，请注意在动画运行时单击#right 会发生什么；根据所需的行为，可能需要.stop。

【讨论】：

你仍然需要点击调用toggle() ... :)
否：“将两个或多个处理程序绑定到匹配的元素，以在交替点击时执行。” api.jquery.com/toggle-event