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

本文介绍了如何使多个jQuery animate（）调用一个接一个地工作？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我单击 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文档：

所以：

 函数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:

So:

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

};

这篇关于如何使多个jQuery animate（）调用一个接一个地工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！