Question

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

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

我尝试将每个动画分别列为：

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

但只有fadeIns和fadeOuts在恰当的时间发生，而不是颜色和文字发生变化。所以我在队列函数中添加了setTimeout用于颜色和文本更改，这使得计时工作。但是当我打电话时

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

它只停止了fadeIns和fadeOuts，而颜色和文字的变化仍然发生了。

总结我的问题：

我如何在链接中实现动画，同时还有一个取消按钮，如果按下该按钮将完全清除所有后续步骤？
如果1的答案是使用queue（），那么我该如何正确地执行此操作（根据上述失败尝试）？

谢谢！

Answer 1

.html()和.css()等功能不使用动画队列，因此您应该使用.queue()在其他动画之间安排这些调用，然后使用.stop(true, true)如果再次按下开始按钮，则取消队列。

绝对不将setTimeout与jQuery动画混合 - 它无法可靠地运作。

请参阅http://jsfiddle.net/alnitak/EKNAd/，了解使用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);

Answer 2

也许是这样的：here

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

    });
});

如何使用带有'取消'按钮的queue（）？

2 个答案: