How to use queue() with a 'cancel' button?
<p>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:</p>

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

<p>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.</p>

<p>I tried listing each animation separately in something like:</p>

<pre><code>$('#target').queue(function(){
    $(this).delay(1000).fadeIn(1000);
    $(this).dequeue();
});
</code></pre>

<p>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 </p>

<pre><code>$('#target').clearQueue();
</code></pre>

<p>it only stopped the fadeIns and fadeOuts, while the color and text changes still happened. </p>

<p>To summarize my question:</p>

<ol>
<li><p>How can I achieve the animation in the link while also having a cancel button that will completely clear all future steps if pressed?</p></li>
<li><p>If the answer to 1 is to use queue(), then how do I do this correctly (in light of my failed attempts described above)?</p></li>
</ol>

<p>Thanks!</p>
