How to fade out, set a value, fade out; but make it "better"

Question

Say the item has a value of 55:

<span id="some">55</span> 

I want to:

• element disappears
• set value 44
• disappears in an element

So I tried:

 $("#some").fadeOut("slow").html("44").fadeIn("slow"); 

But the above first sets the contents of the range to 44, and then disappears and disappears.

So, I tried with a callback:

 function fadeOutComplete(){ $("#some").html("<%= @cc %>").fadeIn("slow"); } $("#some").fadeOut("slow",fadeOutComplete); 

Now it works, but it looks and feels awkward. Is there any way to write this DRYer and more jQuery-er? (not even sure what I mean by jQuery-er!)

How can I pass the element whose value needs to be set and the value that needs to be set to fadeOutComplete so that I can do this inverse sort by generic?

Answer 1

Check this...

 $("#some").fadeOut("slow", function() { $(this).html("<%= @cc %>").fadeIn("slow"); }); 

• You can pass an anonymous function to prevent the registration of a named function, which, no doubt, will be used only once.
• Inside the full callback for fadeOut() , this points to a native DOM element. This allows you to re-reference DRY.

Answer 2

The same approach, but with some purity:

 $('#some').fadeOut('slow',function(){ $(this).html('somehtml').fadeIn('slow'); }); 

Answer 3

This is a problem with the fade team. The command works asyncronous, that is, while it disappears, the text changes. Look at this question for an answer: jQuery synchronous operation

Answer 4

try like this:

 $('#some').fadeOut('slow',function(){ $('#some').html('somehtml'); $('#some').fadeIn('slow'); });