如何在jquery中同时为两件事制作动画

Posted 2023-05-08

【中文标题】如何在jquery中同时为两件事制作动画

【英文标题】：how to animate two things at the same time in jquery

【发布时间】：2011-04-08 05:29:31

【问题描述】：

当鼠标悬停某物时，我想同时为 2 个东西设置动画。

例如，当鼠标悬停在 id="trigger" 的 div 上时，我想更改 id = "box1" 的 box1 的背景颜色和 id="box2" 的 box2 的位置。

但我不希望它们在队列中制作动画，即一个接一个。我希望他们同时开始制作动画并同时完成！

【参考方案1】：

你可以像这样连续运行它们：

$("#trigger").hover(function() 
   $("#box1").stop().animate( backgroundColor: '#000000' );
   $("#box2").stop().animate( top: "-20px" );
, function() 
   $("#box1").stop().animate( backgroundColor: '#FFFFFF' ); //set it back
   $("#box2").stop().animate( top: "0px" );                 //set it back
);

这使用.hover() 在悬停时以一种方式设置动画，并在离开时为它们返回设置动画。 .stop() 只是为了防止动画队列堆积。要为颜色设置动画，您还需要包含 the color plugin 或 jQuery UI。

jquery 中的动画，.animate()，are implemented 使用带有 13 毫秒计时器的 setInterval()，所以它们会在正常流程之外发生......像上面那样做它们不会等待第一个完成，它们'将同时运行。

【讨论】：

我怎样才能一一制作动画？ （不是同时）

@Mehran - 最安全的方法是自己排队，像这样：jsfiddle.net/nick_craver/Cz62t

@NickCraver jQuery 是否对同时运行的动画使用 same 计时器？或者它使用单独的 setInterval 调用为每个对象安排不同的计时器以进行动画处理？

【参考方案2】：

当第一个动画开始时，下一行代码无需等待动画完成就执行。

所以要同时做两件事：

$('#trigger').hover(function()

    $('#box1').animate( ... );
    $('#box2').animate( ... );
);

【讨论】：

感谢您的回答！ ;-)

【参考方案3】：

查看jQuery.animate() docs。有queue属性：

queue：一个布尔值，指示是否将动画放入效果队列。如果false，动画将立即开始。

【讨论】：

他正在为单个元素制作动画，并且队列是 per 元素:)

您能解释一下吗！

【参考方案4】：

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

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

$('#trigger').hover(function() 
    $('#box1').animate(..., queue: 'trigger-hover');
    $('#box2').animate(..., queue: 'trigger-hover').dequeue('trigger-hover');
);

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

干杯， 安东尼