Wie fadeIn und animiere gleichzeitig?

Question

Verwendung von jQuery Ich erstelle eine grundlegende "Tooltip" -Animation, so dass der Tooltip in einer kleinen Animation erscheint, in der er sowohl in die Ansicht als auch in die Vertikale verschwindet.

Bisher habe ich dies:

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

es auf diese Weise tun oder so:

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

Die Animationen einer nach dem anderen ausgeführt wird, die Fade-in und dann die vertikale Animation . Gibt es eine Möglichkeit, beides gleichzeitig zu tun?

Answer 1

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

Doch dies erscheint nicht auf display: none Elemente zu arbeiten (wie fadeIn tut). So müssen Sie möglicherweise diese vorher setzen: (. ZB aus verschiedenen Code)

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

Answer 2

Eine andere Möglichkeit, die gleichzeitige Animationen tun, wenn man sie separat nennen wollen, ist queue zu verwenden. Wieder, wie mit Tinister Antwort würden Sie dieses belebtes für 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'); 

Answer 3

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

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

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