向后播放？

【问题标题】：How do i make this jQuery animation reverse/toggle/play backwards on second click?如何在第二次单击时使这个 jQuery 动画反转/切换/向后播放？
【发布时间】：2012-02-17 18:43:33
【问题描述】：

现在我有这个

<script type='text/javascript'>

        $("#beau").click(function(){
        $("#beau").animate({"margin-Top": "738px"}, "fast");
        });

        </script>

通过更改“margin-Top”来降低 div 效果很好，但我想要做的是当用户再次单击它时，它会回到 700px 的“margin-Top”并重复一遍又一遍。我认为这很简单，但我只做了大约 5 天的 jQuery 工作 :) 如果我知道的话，见鬼。但如果你理解我的问题，谢谢你的回复:)。

【问题讨论】：

标签： jquery animation click toggle margin

【解决方案1】：

你可以使用.toggle():

$("#beau").toggle(function(){
    $(this).stop().animate({marginTop: 738}, "fast");
}, function() {
    $(this).stop().animate({marginTop: 700}, "fast");
});

我添加了一个stop() 只是为了确保它不会在您快速单击多次时中断动画循环。

【讨论】：

.stop() 并没有为我解决这个问题（我使用的是slideUp() 和slideDown()，但同样的原则也适用于这里）。改用.stop(true,true) - 它会立即清除动画队列并跳转到其末尾。