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?

Happygolucky

Answer 1

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

use the callback functionality fadeOut provides

Ivanaivanah

Wow nice! , can I not use html within .text('no no') ? – Happygolucky

I don't get your question, but if you want to use html then use: .html('<span>no no</span>') instead of text(). – Decimeter

you should change .text('no no'); to .html('no no'); and put html within it. thats where .text and .html are for. – Ivanaivanah

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.

Flowered