本文介绍了如何使多个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()调用一个接一个地工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-21 11:15