How can I fade out, change test and then fade in with jQuery cleanly?

Question

Hi all,

I've been playing with a div I have that changes on a user action. I want to have it fade out, change the node value and then fadeIn.

No matter what I try I always see the value change as the element is fading out. Can anyone help?

        calculator_result.fadeOut();
        calculator_result.css("color", "#fff").html("€" + vRelief + ".00");
        calculator_result.fadeIn();

This is the code I'm using now but I tried it a few different ways! A delay might work but surely these a cleaner way?

Cheers, Denis

Answer 1

Have the change and the fade in occur in the callback for fadeOut. When you do it in the callback, the code won't run until after the effect is complete.

 calculator_result.fadeOut( 'normal', function() {
      $(this).css("color", "#fff").html("€" + vRelief + ".00" )
             .fadeIn();
 });