jQuery - 如何使用双动画防止动画队列构建？

Question

我在这里看一下这个教程，以防止动画构建：

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

我的情况： 我正在做一个像下面这样的双动画，并希望阻止动画的建立。由于我有2个动画，它似乎忽略了.stop（）。可以做些什么来防止这种情况？我已经在.animate上尝试了.stop（），如果我这样做，就会停止动画...

$(document).ready(function() {
$('#element').hover(function() {
    $(this).stop()
        .animate(
            { left: 200 }, {
                duration: 'slow',
            })
        .animate(
            { top: 200 }, {
                duration: 'slow',
            });
} , function() {
    $(this).stop()
        .animate(
            { left: 0 }, {
                duration: 'slow',
            })
        .animate(
            { top: 0 }, {
                duration: 'slow',
            });
});

}）;

任何帮助都会得到很大的帮助!!

Answer 1

使用：

$(this).stop(true);

来自stop()：

  

停止当前正在运行的所有内容   所有指定的动画   元件。

注意：“当前正在运行”未排队，正如您所遇到的那样。对于那个供应参数：

clearQueue (Optional) Boolean 

     

设置时的布尔值（true / false）   为true清除动画队列，   有效地阻止所有排队   动画。

此外，您可以提供第二个参数，该参数将快速完成动画，而不是在有帮助的情况下取消它。

Answer 2

您应该使用不会破坏布局的spec。