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

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);
});

Answer 2

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/