javascript - 如何将queue()与 'cancel'按钮一起使用？

Question

我正在尝试学习如何使用 .queue() JQuery 方法。所以我从仅使用 setTimeout 的基本动画开始。我这里有代码:

http://jsfiddle.net/2gJQS/8/

我想知道如何使用队列实现相同的动画。这样做的原因是我希望能够在页面上添加一个“取消”按钮，以完全取消所有 future 的步骤。现在，如果您快速按“开始”按钮几次，setTimeout 就会相互堆积，看起来很奇怪。

我尝试分别列出每个动画，例如:

$('#target').queue(function(){
    $(this).delay(1000).fadeIn(1000);
    $(this).dequeue();
});

但只有淡入和淡出在正确的时间发生，而颜色和文本没有变化。因此，我在队列函数中添加了 setTimeout 来更改颜色和文本，这使得计时工作正常。但是当我打电话时

$('#target').clearQueue();

它只是停止了淡入和淡出，而颜色和文本的变化仍然发生。

总结我的问题:

1. 如何实现链接中的动画，同时还具有取消按钮，按下该按钮将完全清除所有后续步骤？

2. 如果 1 的答案是使用queue()，那么我该如何正确执行此操作(根据上述失败的尝试)？

谢谢!

Answer 1

诸如 .html() 和 .css() 之类的函数不使用动画队列，因此您应该使用 .queue() > 在其他动画之间安排这些调用，然后在再次按下开始按钮时使用 .stop(true, true) 取消队列。

绝对不要将 setTimeout 与 jQuery 动画混合使用 - 它不会可靠地工作。

参见http://jsfiddle.net/alnitak/EKNAd/将您的 fiddle 纠正为使用 jQuery 动画队列:

$('#target').stop(true, true)
    .html("This is one.")
    .css('color', '#000000')
  .fadeIn(1000).fadeOut(2000).queue(function() {
    $(this).html("This is two.").css('color', '#dc0000');
    $(this).dequeue();
}).fadeIn(1000).fadeOut(2000).queue(function() {
    $(this).html("This is three").css('color', '#990099');
    $(this).dequeue();
}).fadeIn(1000).fadeOut(2000);

另外，我previously posted此函数允许调用任何 jQuery 函数，就像它已排队一样:

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

参见http://jsfiddle.net/alnitak/AYMY7/将您的函数重写为使用此:

$('#target')
    .stop(true, true)
    .html('This is one')
    .css('color', '#000000')
    .fadeIn(1000)
    .fadeOut(2000)
    .queued('html', 'This is two')
    .queued('css', 'color', '#dc0000')
    .fadeIn(1000)
    .fadeOut(2000)
    .queued('html', 'This is three')
    .queued('css', 'color', '#990099')
    .fadeIn(1000)
    .fadeOut(2000);