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:

<a href="http://jsfiddle.net/2gJQS/8/" rel="nofollow">http://jsfiddle.net/2gJQS/8/</a>

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


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

To summarize my question:


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

</li> <li>

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

</li> </ol>



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 <em>do not</em> mix setTimeout with jQuery animations - it won't work reliably.

See <a href="http://jsfiddle.net/alnitak/EKNAd/" rel="nofollow">http://jsfiddle.net/alnitak/EKNAd/</a> 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 <a href="https://stackoverflow.com/a/10973084/6782" rel="nofollow">previously posted</a> this function to allow calling <em>any</em> 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 <a href="http://jsfiddle.net/alnitak/AYMY7/" rel="nofollow">http://jsfiddle.net/alnitak/AYMY7/</a> 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);


Maybe something like this : <a href="http://jsfiddle.net/2gJQS/10/" rel="nofollow">here</a>

<strong>HTML</strong> :

<div id="holder"> <div id="target" style="display:none"></div> </div> <button id="start">Start</button> <button id="cancel">Cancel</button>

<strong>script</strong> :

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


  • Add spaces in-between each letter in string, then not have space at the end
  • Can someone explain Gtk2 packing?
  • To print data to a file
  • multiple backgroundworker queueing
  • Session expires too quickly in asp.net mvc4 application
  • How to work out how many bits the result of a factorial should take up as a number?
  • Ruby array hash keys
  • Projecting Objects Out Of Collision
  • onmouseover onmouseout fadeIn fadeOut no jQuery
  • Fading in large images in Chrome
  • MySQL: add a field to a large table
  • Coalescing items in channel
  • Using C# LINQ Expressions for both Value Types and Reference Types
  • Biztalk message agnostic orchestration
  • How to change slowly background attributes in jquery?
  • Render QGraphicsScene according to zoom level
  • How to make Java compiler generate line numbers in compiled code
  • Query with in a loop getting slower and slower
  • Java, will (low + high) >>> 1 overflow?
  • How to Configure Log4Net Custom Object Renderer for Generic Objects?
  • HTTP Module intercept requests and breaks custom errors configuration
  • C++ Armadillo Access Triangular Matrix Elements
  • react native create element with string
  • UITableView takes much longer to load when numberOfRows returns a large number
  • div fade-in when window is scrolled a certain distance from the top
  • countdown bar android example
  • Avoid registering duplicate broadcast receivers in Android
  • How to pass nginx proxy url for socket
  • How to handle elastic beanstalk deployment so it uploads only changed files
  • Check all values in string[] for length?
  • ASP.NET MVC 2 Preview 2 - display directory list rather than home/index
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • If I include Java 8 in my Android app does that affect which devices it will work on?
  • Update CALayer sublayers immediately
  • Menu Color Fade on Hover with Jquery
  • coudnt use logback because of log4j
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?