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

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开发者_JAVA百科 .html() is not being delayed by the .delay() method.

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/

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

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

you could change it to make the change when the fadeOut is completed using the fcallback function parameter.

so it becomes:

$("#products").fadeOut(500, function() {
    $(this).html($("#productPage" + pageNum).html());
    $(this).fadeIn(500);
});