title: Queuing timed jquery events not working properly
body: <p>So I have an empty div set to display:none called id="c1".</p>
  
  <p>I am trying to queue it so that it will fade in and will say:
  2 seconds</p>
  
  <p>then after 1 second it will say:
  1 second</p>
  
  <p>then will fade out and the page redirects.</p>
  
  <pre><code>$('#c1').html('2 seconds').fadeIn('fast').delay(800).html('1 second').delay(800).fadeOut('fast');
  </code></pre>
  
  <p>However, when I run it, I only see "1 second" and it fades out. I cannot see the 2 seconds message at all. It's like as if jquery only listens to the last "html" event.</p>
  
  <p>I have also tried just entering "2 seconds" in the div as default text in html. That doesn't work either. still says "1 second" as soon as the page loads.</p>
  
  <p><strong>EDIT SOLUTION</strong></p>
  
  <p>You can do something like this: </p>
  
  <pre><code>$('#c1').html('2').fadeIn('fast').delay(800).queue(function () {$(this).html('1');$(this).dequeue();}).delay(800).fadeOut('fast');
  </code></pre>