如何让多个 jQuery animate() 调用一个接一个地工作？答案

【问题标题】：How can I make multiple jQuery animate() calls work one after another?如何让多个 jQuery animate() 调用一个接一个地工作？
【发布时间】：2014-02-23 15:20:41
【问题描述】：

当我点击“aa”块时，“aa”和“bb”同时动画。 javascript 是否将 animate() 函数非阻塞地发布到单独的线程中？或者这个函数被多次输入，有数千个使用阻塞型函数调用的回调？我怎样才能让 animate() 在需要时一个一个地处理项目（也许使用计时器可以做到，但我必须总是使用计时器吗？）？

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script>

        function growbits(i,j) {
            $(i).animate({ height: "500px" }); // looks working concurrently
            $(j).animate({ width: "500px"});   // with this one
        };

    </script>
</head>
<body>
    <p id="bb" style="background: #f00; height: 50px; width: 255px; margin: 10px;">asdasd</p>  
    <p id="aa" onclick="growbits(aa,bb);" style="background: #f00; height: 50px; width: 255px; margin: 10px;">
        gfhjjjgfhgkjfhkjtkjyhtkjyhkhfukhgkudfgk

    </p>
</body>
</html>

我在 min.js 文件中找到了以下代码：

self.element.animate(
            $.extend(style, top && left ? { top: top, left: left } : {}), {
                duration: o.animateDuration,
                easing: o.animateEasing,
                step: function() {

                    var data = {
                        width: parseInt(self.element.css('width'), 10),
                        height: parseInt(self.element.css('height'), 10),
                        top: parseInt(self.element.css('top'), 10),
                        left: parseInt(self.element.css('left'), 10)
                    };

                    if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height });

                    // propagating resize, and updating values for each animation step
                    self._updateCache(data);
                    self._propagate("resize", event);

                }
            }
        );

【问题讨论】：

取决于 javascript 引擎...
JavaScript 没有内置的 animate 函数。你可以看到它是一个 jQuery 对象的方法。检查 jQuery 源代码。
好的，我去看看源码。
你有一个额外的;
做';'意思是并行执行？

标签： javascript jquery animation jquery-animate

【解决方案1】：

来自 jQuery 文档：

.animate( properties [, duration ] [, easing ] [, complete ] )
完成
类型：函数()
动画完成后调用的函数。

所以：

function growbits(i,j) {
    $(i).animate({ height: "500px" }, {}, 400, function () {
        $(j).animate({ width: "500px"});
    });

};

【讨论】：

【解决方案2】：

Quentin's answer 有效，但这些天我建议使用选项版本可能会更干净：

.animate( properties, options )

这样：

javascript function growbits(i,j) { $(i).animate({ height: "500px" }, { duration: 400, done: function () { $(j).animate({ width: "500px"}); } }); };

（done 可以替换为（旧选项）complete 或 always；always、done 和 fail 是现在流行的 Promise 事件）

编辑：澄清一下，我建议这样做的原因有三个：

1) 你不需要提供对你无关紧要的属性（在本例中为缓动），

2) 如果您认为其他属性很重要，那么添加它们通常是微不足道的，

3) （最重要的是）当您稍后编辑代码时，您将完全了解嵌套函数的用途，而无需考虑它。

【讨论】：