0

我无法更改 div 的内容。我想要实现的是等待动画结束，然后更改内容以启动动画以显示新信息。这段代码不时工作，这意味着有时它会挂起（isWorking 永远不会变为假，因为动画冻结或动画永远没有时间从 while 内的不断循环中完成。）有没有办法等待动画结束和然后改变内容？（您在下面看到的方式允许我在动画进行时浏览新内容，这为最终用户节省了时间。）有没有办法捕捉动画何时结束？

 function DesignResults(InnerHTML) {
            while(isWorking){
            }
            $("#holder").html(InnerHTML);
            ShowSearch(true);
    }
    var isWorking = false;
    function ShowSearch(show) {
            isWorking = true;
            var outer = $("#outer");
            var inner = $("#inner");
            var height = 0;
            if (show == true)
                height = inner.outerHeight();
            var loaderHeight
            if (height > 0) {
                loaderHeight = 0;
            } else {
                loaderHeight = 31;
            }
            outer.animate({
                'height': height + "px"
            }, 1600, function () {
                $("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { });
                isWorking = false;
            });
    }

我知道如果动画仍在进行中， $(elem).is(':animated') 会给我，但由于 while 的不断循环，它仍然会冻结所有内容。谁能指出我正确的方向？

编辑：我想我被误解了。这是我想要实现的计划：

  1. 开始隐藏动画。
  2. 当动画隐藏时，我正在启动另一个函数来获取内容如果我更快地获取内容，我希望等待动画结束然后更改内容并再次显示图层。如果数据返回的时间超过一秒，则这里没有问题

我同意我可以按照您的建议在动画完成后执行此操作，但是我已将动画设置为将近 1 秒的执行时间，并且该时间可用于从数据库中提取数据。我正在寻找最有效的代码。

4

2 回答 2

4

该函数的最后一个参数：

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { });

是'完整'的功能。动画完成时调用此函数。

所以，当它完成时，你可以在这个函数中做一些事情，就像这样：

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { 
    alert('animations complete!');
});

- - 编辑 - -

根据您的编辑，您可能想要做这样的事情。

  1. 有一个变量可以让您知道两者何时完成：

    var signal = 0;

  2. 具有更改内容的功能：

    function changeContent() {
    signal++;
    if (signal === 2) {
        // change the content code here
        signal = 0;
    }
}

  3. 动画完成后，调用：

    changeContent();

  4. 获取数据后，调用：

    changeContent();

当changeContent()任何一个函数第一次调用时，它将递增signal到 1 并退出该函数。然后在第二次，它将signal增加到 2。因为signal === 2，您知道动画和抓取数据都已完成，因此您现在可以更改您的内容。

使用整数执行此操作的好处是，如果您想让 3、4、5+ 函数在更改内容之前完成工作。在这种情况下，您只需通过增加 中的数字来更改条件if (signal === 2)。

于 2013-07-24T14:16:42.417 回答
1

只需在此处添加附加任务

$("#loading").animate({ 'height': loaderHeight + "px" }, 900, function () { /* Change Content */ });

比动画后执行

于 2013-07-24T14:17:07.557 回答