如何使多个jQuery animate（）调用一个接一个地工作？

Question

当我单击“ 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);

                }
            }
        );

Answer 1

从jQuery文档中：

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

所以：

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

};

Answer 2

Quentin的答案有效，但如今，我建议使用选项版本可能会更干净：

.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）（最重要的是）稍后在编辑代码时，您无需考虑它即可确切了解嵌套函数的用途。

如何使多个jQuery animate（）调用一个接一个地工作？

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-02-23 15:28:20

解决方案2
1 2014-02-23 15:32:23

如何使多个jQuery animate（）调用一个接一个地工作？

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-02-23 15:28:20

解决方案2 1 2014-02-23 15:32:23

解决方案1
3 已采纳 2014-02-23 15:28:20

解决方案2
1 2014-02-23 15:32:23