Question

我已经注意到了这一点，但它终于开始让我烦恼（原谅双关语）。当我将html()与其他函数链接起来时，无论如何html()都会先运行。例如：

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000).html(strData).show("slide", { direction: strDirection }, 500);

如图所示，即使添加delay()也无法解决问题。此行是我为网站的新闻档案部分实施的页面翻转效果的一部分。有任何想法吗？感谢。

Answer 1

jQuery所做的“效果”会被添加到效果队列中，而非类似非效果的调用（.html()）则不会立即执行。

您可以尝试将其添加到回调函数中，尽管如此：

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000, function() {
    $(this).html(strData)
}).show("slide", { direction: strDirection }, 500);

或者您可能正在尝试这样做：

$("#news .inner").hide(500, function() {
    $(this).html(strData); 
}).delay(1000).show("slide", { direction: strDirection }, 500);

BTW我认为您的hide()和show()调用在语法上并不正确。您应该在jQuery API上查看.hide()和.show()

Answer 2

当你将很多方法链接在一起时，它们将按照它们被链接的顺序执行，但动画方法会添加到动画队列中，实际动画会在稍后（按顺序）发生。

据我了解，.delay() method只会延迟动画队列中的内容。 .html()方法不是动画。

如果您希望在.html()方法完成后进行.hide()调用，则应将其置于.hide() method提供的完整回调中。

所以，假设你想隐藏，然后改变html，然后显示，你可以这样做：

$("#news .inner").hide("slide", { direction: strOpposite }, 500,
                       function() { $(this).html(strData); })
                 .show("slide", { direction: strDirection }, 500);

演示：http://jsfiddle.net/BnFyb/

Answer 3

延迟是针对动作队列（animate（），slideUp（）等...）并且不影响非效果的菊花链排序。您可以使用回调来实现$ .html（）;

的真正延迟

$(selector).animate({marginTop:0},500,function() {
    $(this).html("CHANGE ME");
});

Answer 4

隐藏和显示元素等效果会添加到效果队列中。添加到队列确实会立即发生，就像在队列上设置延迟一样。 Html功能也会立即发生。

延迟函数实际上并没有延迟调用链中的下一个函数。默认情况下，没有第二个参数会延迟FX队列。

如果你想解决这个问题，可以使用jQuery.queue函数（http://api.jquery.com/jQuery.queue/）创建自己的队列，或者更简单地使用标准的setTimeout函数（https://developer.mozilla.org/en/DOM/window.setTimeout）

或者你也可以使用hide函数的完整回调来继续你的链

jQuery html（）与其他函数时序问题链接

4 个答案: