jQuery .stop（）的无限循环

Question

我在使用jQuery＆＃39; stop()，并最终得到了一个无限循环。 这个想法是（仅仅是在试验之外）创建一个带有＆＃34;步骤＆＃34;条件，它将检查元素的css属性是否达到某个值，在这种情况下，将动画停在其轨道上，清除队列并立即完成动画。

我知道这可能听起来很愚蠢，因为它可能不是.stop()的用法，但我想你可能会给我这个意外行为的答案。

以下是代码：

$("#element").animate({
    "width": "500px",
    "height": "130px"
}, {
    "duration": 850,
    "step": function () {
        var currentWidth = $(this).width();
        if(currentWidth >= 295) $(this).stop(true, true);
    }
}).slideUp(700);

我发现无限循环是由传递给true的第二个stop()引起的 - 即告诉动画立即完成的参数。

这可能与“步骤”有关。功能，但任何人都可以解释一下这种行为吗？

Answer 1

致电：

$(this).stop(true, true);

将执行最后一步的step功能。在那个电话中，你再次呼叫停止。在step函数完成之前，不会从队列中删除动画。由于动画仍在队列中，因此再次调用stop执行最后step ... on。

Answer 2

这可能是这样的：

1. 运行动画帧
2. 运行步骤功能
3. 步骤条件为真
4. 停止动画，但立即完成
5. 运行最后一个动画帧以完成动画
6. 运行步骤功能（循环回到步骤2）
7. 将动画帧设置为完成（从未到达）
8. 将动画设置为完成（从未到达）

如果您可以检查最后一个动画帧中是否正在执行该步骤，则可以在调用stop（）时将其考虑在内。