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

Question

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/

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();
});

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

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

To summarize my question:

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?

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

Thanks!

Answer 1

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.

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

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

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

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

Answer 2

Maybe something like this : here

HTML :

<div id="holder">
<div id="target" style="display:none"></div>
</div>

<button id="start">Start</button>
<button id="cancel">Cancel</button>

script :

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

    });
});