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

Question

Avec jQuery, je crée une animation "info-bulle" de base de sorte qu'elle 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');

Faites-le de cette façon ou de cette manière:

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

Les animations seront exécutées une par une, l’apparition en fondu en premier, puis l’animation verticale. Existe-t-il un moyen de faire les deux en même temps?

Answer 1

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

Cependant, cela ne semble pas fonctionner avec les éléments : aucun (comme le fait fadeIn ). Donc, vous pourriez avoir besoin de mettre cela au préalable:

$('.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 la file d'attente pour .fadeIn () également 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 , vous n'avez donc pas besoin de 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 file d'attente . 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');