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

Utiliser jQuery Je crée une animation de base pour que l’info-bulle apparaisse dans une petite animation dans laquelle elle apparaît et se déplace verticalement.

Jusqu’à présent, 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 seront exécutées une par une, le premier fondu puis l’animation verticale. Est-il possible de faire les deux en même temps?

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

Cependant, cela ne semble pas fonctionner sur display: none elements (comme le fait fadeIn ). Donc, vous pourriez avoir besoin de mettre cela au préalable:

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

Pour les gens qui cherchent encore quelques années plus tard, les choses ont un peu changé. Vous pouvez maintenant utiliser la queue d’ queue pour .fadeIn() afin qu’elle 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 display: none , vous n’avez donc pas besoin des deux lignes de code supplémentaires.

Une autre façon de faire des animations simultanées si vous souhaitez les appeler séparément (par exemple, à partir d’un code différent) consiste à utiliser la 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');