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

Question

À l’aide de jQuery, je crée une animation «info-bulle» de base de sorte qu’elle apparaisse dans une petite animation dans laquelle elle s’ajoute à la vue et se déplace verticalement.

Jusqu'ici j'ai ceci:

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

Faire comme ça ou comme ça:

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

Les animations se dérouleront une à la fois, le fondu en premier, puis l’animation verticale. Y at-il un moyen de le faire faire les deux en même temps?

Answer 1

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

Cependant, cela ne semble pas fonctionner sur les éléments display: none (comme le font fadeIn ). Donc, vous aurez peut-être besoin de le dire à l'avance:

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

Answer 2

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

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

Cela présente l'avantage de travailler sur les éléments display: none , de sorte que vous n'avez pas besoin des deux lignes de code supplémentaires.

Answer 3

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) consiste à utiliser queue . Encore une fois, comme pour la réponse de Tinister, vous devriez 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');