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

【问题标题】：how to animate two things at the same time in jquery如何在jquery中同时为两件事制作动画
【发布时间】：2011-04-08 05:29:31
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery jquery-ui jquery-animate

【解决方案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');
});

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

干杯，安东尼

【讨论】：