How To Use Queue() With A 'cancel' Button?

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 wonde

Solution 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);
        returnthis.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);

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

    });
});