在 step 内停止 jquery 动画，然后设置动画属性答案

【问题标题】：Stopping a jquery animation within step, then setting the animated property在 step 内停止 jquery 动画，然后设置动画属性
【发布时间】：2013-01-29 06:30:34
【问题描述】：

我正在为移动的块设置动画，并使用 step 选项在每一步检查布尔值是否已切换为 true。如果它确实被切换，我想停止动画并将我正在制作动画的属性设置为某个值。这是我现在的代码

$("#block").animate( { bottom: "+=128" },
{ duration:200,
easing: "easeOutCubic",
step: function(){
        if( stopped == true ){
            $("#block").stop().css("bottom", "none");
            $("#block").css("bottom", "5px");
            //setTimeout( function(){ $("#block").css("bottom", "5px"); }, 1);
        }
    },
complete: function(){
        //complete function
    }
}

);

如果我将代码延迟 1 毫秒（注释行），它就可以工作。如果没有其他方法，我愿意使用它，但我更想知道为什么设置 css 属性在 step 选项中不起作用，但在 timeout 函数中起作用。或者，如果我只是在这里遗漏了一些基本的东西。感谢您的帮助。

【问题讨论】：

我发现了问题，但不知道如何解决。可能这会很有用：Jquery 有function Animation( elem, properties, options )，它有函数tick，并且在那个函数for ( ; index < length ; index++ ) { animation.tweens[ index ].run( percent ); } 中有循环。第 8687 行 code.jquery.com/jquery-latest.js 因此，当动画停止并执行 .css('bottom', '5px') 时，此循环再工作一次并为最后一步设置动画，因此 CSS 底部会发生变化。我也尝试玩动画队列，但没用（（
哇，太棒了。我认为它必须是函数正在执行的东西。我认为暂时我将不得不使用超时，因为我试图绕过它的每一件事也没有奏效。
我认为这是一个肮脏的修复，但它是最简单和最快的方法。如果我找到解决这个问题的方法，我会告诉你
更新：我不再使用 timer 方法，而是为一个设置为 display:none 的虚拟对象设置动画，并使用 step 函数的 now 值来为跟随的单独对象设置动画。在 step 函数中，如果超过该值，则第二个对象不会移动。它仍然有点肮脏的修复，但视觉上更吸引人并且不使用计时器（我讨厌计时器）

标签： jquery animation queue

【解决方案1】：

迟到的答案，但我想出了如何在一步内停止你的动画。

只需使用$(this).stop()。然后就可以设置final属性了：

$("#block").animate( { bottom: "+=128" }, {
    duration:200,
    easing: "easeOutCubic",
    step: function(now, fx) {

        if( stopped == true ) {

            $(this).stop();

            $("#block").css("bottom", "none");
            $("#block").css("bottom", "5px");

        }
    },
    complete: function() {
        //complete function
    }
}

【讨论】：