gpt4 book ai didi

jquery - 使用.each(),如何等待动画结束?

转载 作者:行者123 更新时间:2023-12-01 06:22:34 25 4
gpt4 key购买 nike

在 Web 应用程序中,我使用 .each() 来迭代一组项目。

在函数主体中,我正在寻找要使用动画显示或隐藏的特定项目。

这运作良好。但是,我想在所有动画结束时触发一个函数,仅触发一次。

我该怎么做?

我创建了一个jsFiddle这说明了问题。

基本上,我有这样的东西:

<button id="x">Show</button>
<ol>
<li><span style="display:none">One</span>

</li>
<li><span style="display:none">Two</span>

</li>
<li><span style="display:none">Three</span>

</li>
<li><span style="display:none">Four</span>

</li>
</ol>
<pre id="log">
</pre>

和js:

$(function () {

$("#x").click(function () {
$("li").each(function () {
$(this).find("span").show({
complete: function () {
$("#log").append("completed\n");
}
}).promise().done(function () {
$("#log").append("done\n");
});
});
});
});

在这种情况下,“completed”和“done”都被推送到日志元素。

我只想在所有动画结束时调用“done”函数一次。

我怎样才能做到这一点?

PS:我知道我的代码片段可以写成: $("li > span").show(...),但是 each 构造代表了我的真实情况代码。

[编辑] .each 关键字必须保留,因为我的实际代码是用each 构建的。我的代码片段更简单,只是为了代表问题

最佳答案

您必须绑定(bind).promise()到动画集合(跨度)。

jsFiddle Demo

$("li").each(function () {
$(this).find("span").show({
complete: function () {
$("#log").append("completed\n");
}
})}).find("span").promise().done(function () {
$("#log").append("done\n");
});
<小时/>

.promise()

.promise( [type ] [, target ] )

Returns: Promise

Description: Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, havefinished.

关于jquery - 使用.each(),如何等待动画结束?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18868091/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com