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');
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);
});