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

时间:2010-09-04 13:01:21

标签: jquery jquery-ui jquery-animate

当鼠标悬停时,我想同时为两件事制作动画。

例如,当鼠标悬停id =“trigger”的div时,我想更改box1的背景颜色为id =“box1”,box2的位置为id =“box2”。

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

4 个答案:

答案 0 :(得分:16)

您可以连续运行它们,如下所示:

$("#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 pluginjQuery UI

jquery中的动画,.animate()are implemented使用setInterval()使用13ms计时器,因此它们将在正常流程之外发生...像上面那样做它不等待第一个完成,他们将同时运行。

答案 1 :(得分:4)

第一个动画开始时,下一行代码执行而不等待动画完成。

所以要一次做两件事:

$('#trigger').hover(function()
{
    $('#box1').animate({ ... });
    $('#box2').animate({ ... });
});

答案 2 :(得分:3)

结帐jQuery.animate() docs。有queue属性:

  

queue:一个布尔值,指示是否将动画放在效果队列中。如果false,动画将立即开始。

答案 3 :(得分:3)

虽然对animate的连续调用确实会给出它们同时运行的外观,但潜在的事实是它们是非常接近并行运行的独特动画。

为了确保动画确实在同一时间运行,请使用:

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

可以将更多动画添加到'trigger-hover'队列中,并且可以在最后一个动画队列出队列的情况下启动所有动画。

干杯, 安东尼