jQuery的.animate链，回调和.stop（真，真） [英] jQuery .animate chains, callbacks, and .stop(true, true)

问题描述

所以我有一个动画链（.animate（）。动画（）。动画（）），并在最后.animate（），有回调做一些清理工作。

So I have a animation chain (.animate().animate().animate()), and on the last .animate(), there is a callback to do some clean-up.

的动画是通过在地址改变的哈希（＃1页，第2页＃等）触发 - 因此，当用户快速变化的历史状态，如果有当前正在执行的动画时，需要停止，这样他们不用排队了。问题是，如果我添加一个.stop（真正的，真实的），它仅显示跳转到当前正在运行的动画的结束 - 而只是执行其回调，如果有一个。我需要的是为它跳转到所有链接动画的结尾，并触发所有的回调（好吧，其实只是最后一个）。

The animation is triggered by the hash in the address changing (#page1, #page2, etc.) -- so when the user changes the history state rapidly, if there is a currently executing animation, it needs to stop so they don't queue up. The problem is, if I add a .stop(true, true), it appears only to jump to end of the currently running animation -- and executes only its callback, if there is one. What I need is for it to jump to the end of all of the chained animations, and fire all of the callbacks (well, really just the last one).

这可能不知？
巨大的感谢。

Is this possible somehow? Huge thanks.

推荐答案

答案很简单。感谢JacobM寻找灵感。

The answer is very simple. Thanks to JacobM for inspiration.

(function($){
    $.fn.extend({
        hardStop: function(){
            return this.each(function(){
                var e = $(this);
                while (e.queue().length){
                    e.stop(false, true);
                }
            });
        }
    });
})(jQuery);

$（＃元素」）限定点（）;

后期编辑：我注意到，在复杂的动画链，有必要确保完成回调并没有一个已经清除 FX 队列中添加更多的功能元件（假定多个元素被包括在原始选择器）：

Late edit: I noticed that on complicated animation chains it's necessary to make sure that completing a callback doesn't add more functions to the fx queue of an already "cleared" element (given that multiple elements are included in the original selector):

(function($){
    $.fn.extend({
        hardStop: function(){
            var stopped = false
            while (!stopped) {
                this.each(function(){
                    var e = $(this);
                    while (e.queue().length){
                        e.stop(false, true);
                    }
                });
                stopped = true;
                this.each(function(){
                    var e = $(this);
                    if (e.queue().length){
                        stopped = false;
                    }
                });
            }
        }
    });
})(jQuery);

我有一种感觉，这种解决方案可以更简单...

I have a feeling this solution could be made simpler...

这篇关于jQuery的.animate链，回调和.stop（真，真）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！