如何将queue(）与'取消'按钮

How to use queue() with a 'cancel' button?

本文关键字：取消 按钮 queue      更新时间：2023-09-26

我正在学习如何使用.queue（）JQuery方法。所以我从一个只使用setTimeout的基本动画开始。我这里有代码：

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

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

我试着在中单独列出每一个动画

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

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

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

它只是停止了fadeIn和fadeOut，而颜色和文本仍然发生变化。

总结我的问题：

  1. 如何在链接中实现动画，同时还有一个取消按钮，如果按下该按钮，将完全清除未来的所有步骤？

  2. 如果1的答案是使用queue（），那么我如何正确地做到这一点（鉴于我上面描述的失败尝试）？

谢谢！

像.html()和.css()这样的函数不使用动画队列，所以应该使用.queue()在其他动画之间调度这些调用，然后如果再次按下启动按钮，则使用.stop(true, true)取消队列。

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

请参阅http://jsfiddle.net/alnitak/EKNAd/对于修正为使用jQuery动画队列的fiddle：

$('#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);

此外，我之前发布了这个函数，允许调用任何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);

也许是这样的：这里是

HTML：

<div id="holder">
<div id="target" style="display:none"></div>
</div>
<button id="start">Start</button>
<button id="cancel">Cancel</button>

脚本：

$(function(){   
    $('#start').click(function(){
        $(this).attr("disabled", "true");
        $("#target").html("This is one.").fadeIn(1000, function(){
            $(this).fadeOut(1000, function(){
                $(this).html("This is two.").css("color","#dc0000").fadeIn(1000, function(){
                    $(this).fadeOut(1000, function(){
                        $(this).html("This is three.").css("color","#990099").fadeIn(1000, function(){
                            $(this).fadeOut(1000, function(){
                                $(this).css("color","#000000");
                                $("#start").removeAttr("disabled");
                            });
                        });
                    });
                });
            });
        });                 
    });
    $("#cancel").click(function(){
        $("#target").stop().empty();
        $("#start").removeAttr("disabled");
    });
});
相关文章：