你如何在同一时间淡化和动画？

Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically.

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

So far I have this:

到目前为止我有这个：

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

Doing it that way or this way:

这样做或这样做：

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

The animations will run one at a time, the fade in first and then the vertical animation. Is there a way to have it do both at the same time?

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

3 个解决方案

#1

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

However, this doesn't appear to work on display: none elements (as fadeIn does). So, you might need to put this beforehand:

但是，这似乎不适用于display：none元素（如fadeIn所做）。所以，您可能需要事先将其放入：

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

#2

For people still looking a couple of years later, things have changed a bit. You can now use the queue for .fadeIn() as well so that it will work like this:

对于仍然在几年后看的人来说，事情已经发生了一些变化。您现在可以将队列用于.fadeIn（），以便它可以像这样工作：

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

This has the benefit of working on display: none elements so you don't need the extra two lines of code.

这有利于显示：无元素，因此您不需要额外的两行代码。

#3

Another way to do simultaneous animations if you want to call them separately (eg. from different code) is to use queue. Again, as with Tinister's answer you would have to use animate for this and not fadeIn:

如果要单独调用它们（例如，从不同的代码中），同时动画的另一种方法是使用队列。再次，就像Tinister的回答一样，你必须使用animate而不是fadeIn：

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

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

#1

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