如何使多个jQuery animate（）调用一个接一个地工作？ [英] How can I make multiple jQuery animate() calls work one after another?
问题描述
当我单击 aa块时， aa和 bb都同时设置动画。 javascript是否将animate（）函数非阻塞地发布到单独的线程中？还是使用数千个使用阻塞类型函数调用的回调函数多次输入此函数？
<$ p $如何在需要时如何使animate（）在项目上一件一件地工作（也许使用计时器可以，但我必须始终使用计时器吗？）？ p>
<！DOCTYPE html>
< html>
< head>
< script src = http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
< / script>
< script>
函数growbits（i，j）{
$（i）.animate（{height： 500px}）; //看起来同时工作
$（j）.animate（{width： 500px}）; //这个
}；
< / script>
< / head>
< body>
< p id = bb style = background：＃f00;高度：50px;宽度：255px;边距：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}：{} ），{
持续时间：o.animateDuration，
缓和：o.animateEasing，
步骤：function（）{
var data = {
width ：parseInt（self.element.css（'width'），10），
高度：parseInt（self.element.css（'height'），10），
顶部：parseInt（self.element .css（'top'），10），剩余
：parseInt（self.element.css（'left'），10）
};
if（pr& ;&pr.length）$（pr [0]）。css（{width：data.width，height：data.height}）;
//传播调整大小并为每个更新值动画步骤
self._updateCache（data）;
self._propagate（ resize，event）;
}
}
）；
来自jQuery文档：
.animate（properties [，持续时间] [，缓动] [，完成]）
完成
类型：Function（）
一个函数动画完成后立即调用。
所以：
函数growbits（i，j）{
$ {i）.animate（{height： 500px}，{}，400，function（）{
$ {j ）.animate（{width： 500px}）;
}）;
};
When I click the "aa" block, both "aa" and "bb" animate at the same time. Does javascript issue animate() functions non-blockingly into separate threads? Or this function is entered multiple times with thousands of callbacks which use blocking-type function calls? How can I make animate() work on items one by one when needed(maybe using a timer could do but do I have to use a timer always?)?
<!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>
Ive found the following code in the min.js file:
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);
}
}
);
From the jQuery documentation:
.animate( properties [, duration ] [, easing ] [, complete ] )complete
Type: Function()
A function to call once the animation is complete.
So:
function growbits(i,j) {
$(i).animate({ height: "500px" }, {}, 400, function () {
$(j).animate({ width: "500px"});
});
};
这篇关于如何使多个jQuery animate（）调用一个接一个地工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
