jquery - 使用 jQuery .stop() 进行无限循环

Question

我在玩弄 jQuery 的 stop() 并最终陷入了无限循环。这个想法(只是出于实验)创建一个带有“step”条件的动画，该条件将检查元素的 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);

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

这可能与“step”功能有关，但是有人可以解释一下这种行为吗？

Answer 1

调用:

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

将执行最后一步的step函数。在该调用中，您再次调用停止。在该 step 函数完成之前，动画不会从队列中删除。由于动画仍在队列中，因此再次调用 stop 会执行最后一个步骤...不断执行。