如何使用带有“取消"按钮的queue()? [英] How to use queue() with a 'cancel' button?

问题描述

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

I am trying to learn how to use the .queue() JQuery method. So I started with a basic animation using only setTimeout. I have the code here:

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

我想知道如何使用队列来实现相同的动画.原因是我希望能够在页面上添加一个取消"按钮，以完全取消所有以后的步骤.现在，如果您快速按几次Start(开始)按钮，则setTimeout会彼此堆积，使它看起来很奇怪.

I am wondering how to achieve this same animation using queues. The reason for this is I want to be able to add a 'cancel' button to the page that would completely cancel all future steps. Right now if you press the Start button several times quickly, the setTimeout's pile on each other and make it look strange.

我尝试用类似的方式分别列出每个动画:

I tried listing each animation separately in something like:

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

但是只有fadeIns和fadeOuts在正确的时间发生，并且颜色和文本没有改变.因此，我在队列函数中添加了setTimeout来更改颜色和文本，这使计时工作正常.但是后来我打电话给

But only the fadeIns and fadeOuts happened at the right time, and not the color and text changes. So I added setTimeout's inside the queue functions for the color and text changes, and this made the timing work. But then when I called

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

它仅停止了fadeIns和fadeOuts，而颜色和文本更改仍然发生.

it only stopped the fadeIns and fadeOuts, while the color and text changes still happened.

总结我的问题:

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

1. How can I achieve the animation in the link while also having a cancel button that will completely clear all future steps if pressed?

如果1的答案是使用queue()，那么如何正确地做到这一点(鉴于上述失败的尝试)?

If the answer to 1 is to use queue(), then how do I do this correctly (in light of my failed attempts described above)?

谢谢！

推荐答案

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

Functions like .html() and .css() don't use the animation queue, so you should use .queue() to schedule those calls in between other animations, and then use .stop(true, true) to cancel the queue if the start button is pressed again.

绝对不要将setTimeout与jQuery动画混合-它不能可靠地工作.

Absolutely do not mix setTimeout with jQuery animations - it won't work reliably.

请参见 http://jsfiddle.net/alnitak/EKNAd/，以将您的提琴修正为使用jQuery动画队列:

See http://jsfiddle.net/alnitak/EKNAd/ for your fiddle corrected to use jQuery animation queues:

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

此外，我先前发布的此函数可以调用 any jQuery函数，就像它一样被排队:

Also, I previously posted this function to allow calling any jQuery function as if it were queued:

(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/使用这个:

See http://jsfiddle.net/alnitak/AYMY7/ for your function rewritten to use this:

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

这篇关于如何使用带有“取消"按钮的queue()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！