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

Posted 2023-02-18

【中文标题】如何同时运行两个 jQuery 动画？

【英文标题】：How to run two jQuery animations simultaneously?

【发布时间】：2010-11-18 02:07:18

【问题描述】：

是否可以同时在两个不同的元素上运行两个动画？我需要这个问题的反面Jquery queueing animations。

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

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

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

【问题讨论】：

呃……你试过了吗？如果您使用那里的确切代码，根据我对animate() 工作原理的理解，它们应该同时运行。

我们开始 -jsbin.com/axata 。添加/edit查看代码

我在为不同的 CSS 属性设置动画时遇到了一个真正的问题。这个问题看起来很老，我把它放在 JSFiddle 中，似乎两种方法都有效。这仍然相关吗？ jsfiddle.net/AVsFe

在当前的 jquery 中，我相信自 jQuery 1.4 以来，上面的代码确实同时为​​两者设置动画，因为 fx 队列附加到您调用 .animate() 的元素，而不是全局队列。

上面的jsbin已经死了。相同的jsfiddle，有效：jsfiddle.net/b9chris/a8pwbhx1

【参考方案1】：

是的，有！

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

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

【讨论】：

谢谢你，不知道queue这个变量！

请问传一个函数给jQuery的目的是什么？

@pilau 会在文档准备好时执行。这是 $(document).ready(function()); 的简写。并允许您将 javascript 代码放在元素定义之前。

是的，你可以将队列设置为真/假，或者这样给它一个字符串（队列名称），两个动画使用相同的计时器......

你会如何添加一个 onComplete 到这个？

【参考方案2】：

这将同时运行是的。 如果你想同时在同一个元素上运行两个动画怎么办？

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

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

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

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

【参考方案3】：

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

将所有段落动画到左侧样式 50 和不透明度 1（不透明， 可见），完成动画 在 500 毫秒内。 它也会 在队列之外做，意思是 会自动启动 等待轮到它。

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

只需添加：queue: false。

【讨论】：

如何在这个上集成完整的功能？ :s

【参考方案4】：

如果您按原样运行上述程序，它们将显示为同时运行。

这是一些测试代码：

<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>

【参考方案5】：

虽然连续调用 animate 确实会显示它们同时运行的外观，但基本事实是它们是非常接近并行运行的不同动画。

为了确保动画确实同时运行，请使用：

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

可以将更多动画添加到“我的动画”队列中，并且所有动画都可以在最后一个动画出列时启动。

干杯， 安东尼

【讨论】：

如果您还需要在 一组其他动画完成后触发动画，这里有一个依赖于承诺的答案，也可能会有所帮助：***.com/a/35141159/4342230

另外，@Borgboy，你的回答对我不起作用。根据***.com/a/1218485/4342230，每个对象的动画队列是不同的。您必须将所有动画排队，然后执行一个新的 jQuery 查询，该查询包含所有已排队动画的元素，以便您可以对结果调用 dequeue 以便它们一起开始。换句话说，$('#first, #second').dequeue().

@GuyPaddock - 是的，你是对的。我需要相应地更新我的答案。看起来这种变化发生在 jQuery 3.3.1 或之后。

【参考方案6】：

请参阅这篇关于为对象中的值设置动画的精彩博客文章。然后您可以使用这些值为您喜欢的任何内容设置动画，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');
                
            );
        

【讨论】：

死链接，在web.archive.org/web/20150101065437/http://www.josscrowcroft.com/…找到它

【参考方案7】：

发布我的答案以帮助某人，评分最高的答案并没有解决我的疑虑。

当我实现以下 [from the top answer] 时，我的垂直滚动动画只是来回抖动：

$(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);

编码愉快！