你如何同时淡入和动画？答案

【问题标题】：How do you fadeIn and animate at the same time?你如何同时淡入和动画？
【发布时间】：2010-12-11 18:35:45
【问题描述】：

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

到目前为止，我有这个：

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

那样做还是那样做：

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

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

【问题讨论】：

标签： jquery effects jquery-animate fadein

【解决方案1】：

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

但是，这似乎不适用于display: none 元素（就像fadeIn 一样）。因此，您可能需要提前输入：

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

【讨论】：

+1。但是，$('.tooltip').show() 是 $('.tooltip').css('display', 'block'); 的更好替代品。
IE {filter:alpha(opacity=50);} 怎么样？这也考虑这个选项吗？

【解决方案2】：

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

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

这有利于处理display: none 元素，因此您不需要额外的两行代码。

【讨论】：

队列是一个强大的选项，特别是在处理动画效果时，非常感谢。

【解决方案3】：

如果您想单独调用它们（例如，从不同的代码）同时制作动画，另一种方法是使用queue。同样，与 Tinister 的回答一样，您必须为此使用动画而不是淡入：

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

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

【讨论】：