Wie FadeIn Sie zur gleichen Zeit und animieren?
-
22-07-2019 - |
Frage
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?
Lösung
$('.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);
Andere Tipps
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.
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');