jQuery .delay() not delaying the .html() function

Question

I'm trying to do a little javascript trick to fade out a div, replace its content, and fade it back in. The .html event is replacing the content before the fadeOut is complete...

$("#products").fadeOut(500)               .delay(600)               .html($("#productPage" + pageNum).html())               .fadeIn(500); 

It appears that the .html() is not being delayed by the .delay() method.

Answer 1

delay will work for your case when used with the queue like this:

$("#products").fadeOut(500)     .delay(600)     .queue(function(n) {         $(this).html("hahahhaha");         n();     }).fadeIn(500);​ 

Try it here: http://jsfiddle.net/n7j8Y/

Answer 2

Maybe the "queue" way it's ok, But this javascript solution works better for me:

    setTimeout (function(){       $("#products").html('Product Added!');     },1000);