jQuery .delay（）不会延迟.html（）函数

Question

我正在尝试做一个小小的javascript技巧来淡出div，替换它的内容，然后淡入它。.html事件正在fadeOut完成之前替换内容......

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

.html()方法没有延迟.delay()。

Answer 1

delay与queue一起使用时适用于您的情况：

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

在此处试试：http://jsfiddle.net/n7j8Y/

Answer 2

你可以改变它，以便在使用fcallback函数参数完成fadeOut时进行更改。

所以它变成了：

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

Answer 3

也许“排队”方式没关系， 但是这个javascript解决方案对我来说效果更好：

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