Question about the .html() function of jQuery?

Right now when I replace content inside the "foo" div, the new content appears right away. Is there a way to have the new content fade in slowly.

<div class="foo">Initial content to be replaced</div>

$('div.foo').html('New content');

I know about the fadeIn() function, the reason why I ask this question is because I can't understand how it can be technically possible since the foo div was never hidden to begin with, so how will it be able to "fade in". But still in cas开发者_StackOverflow社区e someone can think of a way it would be most super.

Use this: $('div.foo').html('New Content').hide().fadeIn();

Some of the other answers here don't account for the fact that the transitions take time -- the html will get replaced in the middle the fadeOut and look like a mistake.

Assuming you want a fadeOut to complete, then replace html, then fadeIn, use a callback:

$('div.foo').fadeOut(function () {
   $(this).html('New content').fadeIn();
});

Live Demo

$('div.foo').html('New content').hide().fadeIn();

You hide it first, then fade it in

You could try this:

$("div.foo").hide("slow").html("New Content").show("slow");

This will fade the div out, change the content, and then fade it in, which might achieve the effect you're looking for.