Question

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

动画由地址更改中的哈希触发（＃page1，＃page2等） - 因此当用户快速更改历史状态时，如果当前正在执行动画，则需要停止以便进行不排队。问题是，如果我添加.stop（true，true），它似乎只跳转到当前正在运行的动画的结尾 - 并且只执行其回调（如果有的话）。我需要的是它跳到所有链式动画的末尾，并触发所有回调（好吧，实际上只是最后一个）。

这有可能吗？非常感谢。

Answer 1

答案很简单。感谢JacobM的灵感。

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

$("#element").hardStop();

延迟编辑：我注意到在复杂的动画链上，必须确保完成回调不会向已经“清除”的元素的fx队列添加更多函数（假设包含多个元素）在原始选择器中）：

(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);

我觉得这个解决方案可以变得更简单......

jQuery .animate chains，callbacks和.stop（true，true）

1 个答案: