jQuery .delay() 不延迟 .html() 函数答案

【问题标题】：jQuery .delay() not delaying the .html() functionjQuery .delay() 不延迟 .html() 函数
【发布时间】：2011-03-29 05:51:21
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

delay 与queue 一起使用时适用于您的情况，如下所示：

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

【讨论】：

两件事 - 为什么.delay() 不能在.html() 上工作，n() 有什么作用？
@DerekAdair - 不知道为什么这是必要的，但似乎是。如果您手动触发$('#example').trigger('click'); 之类的事件，则没有n() 将无法正常工作。它可能与某种返回值有关。
n()代表'next queue item'，根据docs on queue，这个dequeue就是item，触发下一个动画item。
这仍然是最简单的方法吗？

【解决方案2】：

也许“排队”的方式还可以，但是这个 javascript 解决方案对我来说效果更好：

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

【讨论】：

【解决方案3】：

您可以使用 fcallback 函数参数对其进行更改以在 fadeOut 完成时进行更改。

这样就变成了：

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

【讨论】：