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

当我点击“aa”块时，“aa”和“bb”都会同时生成动画。 javascript是否以非阻塞方式将animate（）函数发布到单独的线程中？ 或者这个函数多次输入，有数千个使用阻塞类型函数调用的回调？ 如何在需要时让animate（）逐项处理项目（也许使用计时器可以做，但我必须总是使用计时器吗？）？

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

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