jQuery .delay() verzögert nicht die .html() Funktion

Question

Ich versuche, einen kleinen Javascript-Trick zu tun, um ein div auszublenden, seinen Inhalt zu ersetzen und es wieder zu verblassen. Das .html Ereignis ersetzt den Inhalt bevor die fadeOut abgeschlossen ist ...

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

Es erscheint, dass die .html() nicht durch die .delay() Verfahren verzögert wird.

Answer 1

delay für Ihren Fall, wenn sie mit dem queue so benutzten:

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

Probieren Sie es hier: http://jsfiddle.net/n7j8Y/

Answer 2

Sie können es ändern, um die Änderung zu machen, wenn die FadeOut mit dem Funktionsparameter fcallback abgeschlossen ist.

so wird es:

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

Answer 3

Vielleicht ist die "Warteschlange" So geht es, Aber diese Javascript-Lösung funktioniert besser für mich:

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