jQuery .delay() no retrasa la función .html()

Question

Estoy tratando de hacer un pequeño truco de JavaScript para atenuar un div, reemplazar su contenido y volverlo a fundir. El evento .html está reemplazando el contenido antes de la fadeOut es completa ...

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

se parece que el .html() no se está retrasando por el método .delay().

Answer 1

delay trabajará para su caso cuando se utiliza con el queue así:

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

probar aquí: http://jsfiddle.net/n7j8Y/

Answer 2

puede cambiarlo para realizar el cambio cuando se completa fadeOut con el parámetro de función fcallback.

por lo que se convierte en:

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

Answer 3

Tal vez la "cola" está bien, Pero esta solución de javascript funciona mejor para mí:

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