当前位置：文江博客话题详情

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

发布于 2024-09-18 01:19:47 字数 169 浏览 5 评论 0原文

当鼠标悬停在某物上时，我想同时为两件事制作动画。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

作死小能手 2024-09-25 01:19:48

您可以连续运行它们，如下所示：

$("#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()< /a> 在悬停时以一种方式设置动画，并在离开时将它们设置为返回。 .stop() 只是为了防止动画队列堆积。要对颜色进行动画处理，您需要颜色插件，或jQuery UI 也包括在内。

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

You can just run them in a row, like this:

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

This uses .hover() to animate one way when hovering, and animate them back when leaving. The .stop() is just to prevent animation queue build-up. To animate a color, you'll need either the color plugin, or jQuery UI included as well.

Animations in jquery, .animate(), are implemented using setInterval() with a 13ms timer, so they'll happen outside the normal flow...doing them like above doesn't wait for the first to finish, they'll run simultaneously.

回复收藏 0 原文

归属感 2024-09-25 01:19:48

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

所以要同时做两件事：

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

When the first animation starts, the next line of code executes without waiting for the animation to finish.

So to do two things at once:

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

回复收藏 0 原文

梦中的蝴蝶 2024-09-25 01:19:48

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

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

回复收藏 0 原文

九歌凝 2024-09-25 01:19:48

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

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

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

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

干杯，
安东尼

While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.

To insure the animations are indeed running at the same time use:

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

Further animations can be added to the 'trigger-hover' queue and all can be initiated provided the last animation dequeue's them.

Cheers,
Anthony

回复收藏 0 原文

~没有更多了~