Jquery replaceWith - fadeout / Fadein

Question

I think this is going to come across very basic stuff but I'm brand new at the wonderful world of jquery.

Heres my simple working replace code :

<div>yes yes </div>
<script>$('div').replaceWith('<span>no no</span>');</script>

What I am trying to achieve is fade out of "yes yes" div then fade in the new "no no" span

Any ideas guys?

Answer 1

$('div').fadeOut(1000,function(){ $(this).text('no no').fadeIn(1000); });

use the callback functionality fadeOut provides

Answer 2

$('div').fadeTo(1000, 0, function(){ $(this).html('<span>no no</span>').fadeTo(1000, 1); });

I'd take DoXicK's suggestion just a little further with FadeTo. I also incorporated the .html function you were discussing. I prefer fadeTo because it gives you a little flexibility and avoids some undesired behavior if the stop() function ends up in play. Not to mention you can fade to whatever percentage you like.