如何同时淡入和动画？

Question

我使用 jQuery 创建一个基本的“工具提示”动画，以便工具提示将出现在一个小动画中，在该动画中它会淡入视图并垂直移动。

到目前为止，我有这样的：

$('.tooltip').fadeIn('slow');
$('.tooltip').animate({ top: "-10px" }, 'slow');

这样做或这样：

$('.tooltip').fadeIn('slow').animate({ top: "-10px" }, 'slow');

动画将一次运行一个，首先淡入，然后是垂直动画。有没有办法让它同时做这两件事？

Answer 1

对于几年后仍在寻找的人来说，情况发生了一些变化。您现在也可以将 queue 用于 .fadeIn()，这样它的工作方式如下：

$('.tooltip').fadeIn({queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');

这具有在 display: none 元素，这样您就不需要额外的两行代码。

Answer 2

如果您想单独调用它们（例如，从不同的代码），则执行同步动画的另一种方法是使用队列。再次，正如 Tinister 的答案一样，您必须为此使用 animate 而不是 fadeIn：

$('.tooltip').css('opacity', 0);
$('.tooltip').show();
...

$('.tooltip').animate({opacity: 1}, {queue: false, duration: 'slow'});
$('.tooltip').animate({ top: "-10px" }, 'slow');

Answer 3

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');

但是，这似乎不适用于 display: none 元素（如 fadeIn 那样）。所以，你可能需要提前把这个：

$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);