0

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

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

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

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

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

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

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

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

总结一下我的问题：

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

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

谢谢！

4

2 回答 2

2

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

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

请参阅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);

此外，我之前发布了这个函数，以允许调用任何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);
于 2012-09-02T17:00:00.230 回答
1

也许是这样的：这里

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

    });
});
于 2012-09-02T17:12:19.843 回答