1

在 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");
            });
        });    
    });
});

在这种情况下，“完成”和“完成”都被推送到日志元素。

当所有动画结束时，我只想调用一次“完成”函数。

我怎样才能做到这一点？

PS：我知道我的代码片段可以写成：$("li > span").show(...)，但是这个each结构代表了我的真实代码。

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

4

3 回答 3

3

将延迟存储在一个数组中，并使用它来查看所有动画何时完成：

$(function () {
    $("#x").click(function () {
        var arr = [];
        $("li").each(function() {
            var def = $(this).find("span").show('slow', function () {
                $("#log").append("completed\n");
            });
            arr.push(def)
        });
        $.when.apply($, arr).then(function () {
            $("#log").append("done\n");
        });
    });
});

小提琴

于 2013-09-18T09:14:17.280 回答
3

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

jsFiddle 演示

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

。承诺（）

.promise（[类型] [，目标]）

回报：承诺

描述：返回一个 Promise 对象以观察绑定到集合的特定类型的所有操作（无论是否排队）都已完成。

于 2013-09-18T09:12:12.210 回答
2

尝试一个简单的版本

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

演示：小提琴

于 2013-09-18T09:11:53.950 回答