Search code examples
cssjqueryjquery-effects

Queuing timed jquery events not working properly

So I have an empty div set to display:none called id="c1".

I am trying to queue it so that it will fade in and will say: 2 seconds

then after 1 second it will say: 1 second

then will fade out and the page redirects.

$('#c1').html('2 seconds').fadeIn('fast').delay(800).html('1 second').delay(800).fadeOut('fast');

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.

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.

EDIT SOLUTION

You can do something like this: 

$('#c1').html('2').fadeIn('fast').delay(800).queue(function () {$(this).html('1');$(this).dequeue();}).delay(800).fadeOut('fast');
Solution

  • You can only delay() animations, not other functions like html(), they are perfomered instantly.

    Use a timeout for the html() functions instead, or place them in the animation callback.

    $('#c1').html('2 seconds').fadeIn(1000, function() {
   $(this).html('1 second').fadeOut(1000);
});​