web-dev-qa-db-fra.com

Comment fondez-vous et animez-vous en même temps?

En utilisant jQuery, je crée une animation de base "info-bulle" afin que l'info-bulle apparaisse dans une petite animation dans laquelle elle s'estompe et se déplace verticalement.

Jusqu'à présent, j'ai ceci:

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

Le faire de cette façon ou de cette façon:

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

Les animations s'exécuteront une à la fois, le fondu en premier puis l'animation verticale. Existe-t-il un moyen de faire faire les deux en même temps?

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

Cependant, cela ne semble pas fonctionner sur display: none éléments (comme le fait fadeIn). Donc, vous devrez peut-être mettre cela à l'avance:

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

Pour les personnes qui cherchent encore quelques années plus tard, les choses ont un peu changé. Vous pouvez maintenant utiliser le queue pour .fadeIn() afin qu'il fonctionne comme ceci:

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

Cela a l'avantage de travailler sur display: none éléments pour que vous n'ayez pas besoin des deux lignes de code supplémentaires.

49
SCB

Une autre façon de faire des animations simultanées si vous voulez les appeler séparément (par exemple à partir d'un code différent) est d'utiliser queue. Encore une fois, comme avec la réponse de Tinister, vous devrez utiliser animate pour cela et non fadeIn:

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

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