如何同时运行两个jQuery动画?


211

是否可以同时在两个不同的元素上运行两个动画?我需要与此问题相反的Jquery排队动画

我需要做这样的事情...

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

但要同时运行这两个。我唯一想到的就是setTimeout为每个动画使用一次,但是我认为这不是最好的解决方案。


嗯...您尝试过吗?如果您使用那里的确切代码,就我对animate()工作原理的理解而言,它们应该同时运行。
混乱

在这里-jsbin.com/axata。添加/编辑以查看代码
Russ Cam

在为不同的CSS属性设置动画时,我遇到了一个真正的问题。这个问题看起来很陈旧,我把它放在JSFiddle中,似乎两种方法都可行。这仍然有意义吗?jsfiddle.net/AVsFe
德沃克

3
在当前的jquery中,并且我相信自jQuery 1.4起,上述代码会同时使这两者同时进行动画处理,因为fx队列被附加到您在其上调用.animate()的元素上,而不是全局队列上。
克里斯·莫斯基尼

上面的jsbin已经死了。jsfiddle可以正常工作:jsfiddle.net/b9chris/a8pwbhx1
Chris Moschini

Answers:


418

就在这里!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

15
谢谢你,不知道那个queue变量!

4
请问将函数传递给jQuery的目的是什么?
pilau

13
@pilau将在文档准备就绪时执行。这是$(document).ready(function(){})的简写;并使您可以将javascript代码放在元素定义之前。
拉斐尔·米歇尔

1
是的,您可以将进餐者将queue设置为true / false,或者以这种方式给它一个字符串(队列名称),两个动画都使用相同的计时器...
AlexK

3
您将如何添加onComplete?
jmchauv

19

那将同时运行。如果要在同一元素上同时运行两个动画怎么办?

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

这最终使动画排队。要同时运行它们,您只需使用一行。

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

还有其他方法可以在同一元素上同时运行两个不同的动画吗?


9

我相信我在jQuery文档中找到了解决方案:

将所有段落设为左样式为50且不透明度为1(不透明,可见)的动画,从而在500毫秒内完成动画。它还将在队列外执行该操作,这意味着它将自动启动而无需等待其转弯

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

只需添加:queue: false


1
如何在此功能上集成完整功能?:s
Brainfeeder

8

如果按原样运行上面的命令,它们似乎会同时运行。

这是一些测试代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

3

的确,连续调用动画会赋予它们同时运行的外观,但基本事实是它们是非常接近并行运行的独特动画。

为确保动画确实同时运行,请使用:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});

可以将其他动画添加到“我的动画”队列中,并且只要最后一个动画出队就可以启动所有动画。

干杯,安东尼


2

请参阅这篇精彩的博客文章,内容涉及对对象中的值进行动画处理。然后,您可以使用值同时进行100%的动画处理!

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

我已经使用它像这样滑入/滑出:

        slide : function(id, prop, from, to) {
            if (from < to) {
                // Sliding out
                var fromvals = { add: from, subtract: 0 };
                var tovals = { add: to, subtract: 0 };
            } else {
                // Sliding back in
                var fromvals = { add: from, subtract: to };
                var tovals = { add: from, subtract: from };
            }

            $(fromvals).animate(tovals, {
                duration: 200,
                easing: 'swing', // can be anything
                step: function () { // called on every step
                    // Slide using the entire -ms-grid-columns setting
                    $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
                }
            });
        }

1
无效

0

发布我的答案以帮助某人,评分最高的答案并不能解决我的疑虑。

当我实现以下[从最上面的答案开始]时,我的垂直滚动动画只是来回抖动:

$(function () {
 $("#first").animate({
   width: '200px'
}, { duration: 200, queue: false });

$("#second").animate({
   width: '600px'
}, { duration: 200, queue: false });
});

我提到:W3 Schools Set Interval,它解决了我的问题,即“语法”部分:

setInterval(函数,毫秒,param1,param2,...)

使我的参数形式{ duration: 200, queue: false }强制为零,并且仅查看指导性参数。

总而言之,这是我的代码,如果您想了解它为什么起作用,请阅读链接或分析间隔期望参数:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

其中“ autoScroll”是:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

编码愉快!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.