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 growbits(i,j) {
    $(i).animate({ height: "500px" }, {}, 400, function () {
        $(j).animate({ width: "500px"});
    });

};

Answer 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）（最重要的是）当您稍后编辑代码时，您将完全了解嵌套函数的用途，而无需考虑它。

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

2 个答案: