Wie FadeIn Sie zur gleichen Zeit und animieren?

Question

Mit jQuery Ich erstelle eine grundlegende ‚Tooltip‘ Animation, so dass der Tooltip in einer kleinen Animation angezeigt wird, in dem es sowohl vertikal als auch Bewegung in Sicht schwindet.

Bisher habe ich dies:

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

Doing es so oder so:

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

Die Animationen werden einen nach dem anderen ausgeführt werden, die Fade-in und dann der vertikale Animation. Gibt es eine Möglichkeit, es zu tun hat beide zur gleichen Zeit?

Answer 1

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

Dies ist jedoch nicht erscheint auf display: none Elemente zu arbeiten (wie fadeIn tut). So müssen Sie möglicherweise diese vorher setzen:

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

Answer 2

Für die Menschen immer noch ein paar Jahre suchen später haben sich die Dinge ein wenig verändert. Sie können nun auch die queue für .fadeIn() verwenden, so dass es wie folgt funktioniert:

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

Dies hat den Vorteil der Arbeit an display: none Elemente, so dass Sie die zusätzlichen zwei Zeilen Code nicht benötigen.

Answer 3

Eine andere Möglichkeit, die gleichzeitige Animationen zu tun, wenn Sie wollen, separat nennen (z. B. aus verschiedenen Code) ist queue zu verwenden. Wieder, wie mit Tinister Antwort würden Sie belebte für diesen und nicht fadeIn verwenden müssen:

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

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