Jquery Queue Change in HTML?

Question

I have a piece of jquery code:

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

My expectation is that this code would work as follows: Fade out element in .2 seconds Then change text instantly Then fade in over .6 seconds

However it works like this: Change text instantly Fade out in .2 seconds Fade in over .6 seconds

Clearly I've misunderstood how chaining works. Any suggestions on how to get this working as expected/desired?

Answer 1

Chaining executes immediately (as you experienced). If you want something to go after the fadeOut is done, then put that code in a completion function that you pass to fadeOut.

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

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

Answer 2

The jquery function html isn't part of animation, so it doesn't get queued up with other animation effects. Instead you have to do this:

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

Here you use the callback of fadeOut to change the html and fade it back in.