Changing a queue in jQuery in HTML?

Question

I have jquery code:

$('#my_span_id').fadeOut(200).html(new_count).fadeIn(600); 

I expect this code to work as follows: Decay element in .2 seconds Then change the text instantly Then decay in .6 seconds

However, it works as follows: Change text instantly Attenuation in .2 seconds Attenuation after .6 seconds

Clearly, I misunderstood how the chain works. Any suggestions on how to make this work as expected / desirable?

Answer 1

The chain runs immediately (as you did). If you want to do something after fadeOut completes, then put this code in the completion function that you pass to fadeOut.

 $('#my_span_id').fadeOut(200, function(){ $(this).html(new_count).fadeIn(600); }); 

You can see how it works here: http://jsfiddle.net/jfriend00/ttj2B/ .

Answer 2

The jquery html function is not part of the animation, so it does not get queued with other animation effects. Instead, you should do this:

 $('#my_span_id').fadeOut(200, function(){ $(this).html(new_count).fadeIn(600); } ); 

Here you use the fadeOut to modify the html and bring it back.