Como você fadeIn e animado ao mesmo tempo?

Question

Usando jQuery Estou criando uma animação básica 'dica' para que a dica de ferramenta aparecerá em uma pequena animação em que se desvanece em vista, bem como mover verticalmente.

Até agora eu tenho este:

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

Fazê-lo assim ou assim:

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

As animações serão executados um de cada vez, o fade in em primeiro lugar e, em seguida, a animação vertical. Existe uma maneira de tê-lo fazer as duas coisas ao mesmo tempo?

Answer 1

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

No entanto, isso não parece trabalho em elementos display: none (como fadeIn faz). Assim, você pode precisar colocar isso de antemão:

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

Answer 2

Para as pessoas ainda procuram um par de anos mais tarde, as coisas mudaram um pouco. Agora você pode usar o queue para .fadeIn(), bem assim que ele vai funcionar assim:

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

Isto tem a vantagem de trabalhar em elementos display: none para que você não precisa de mais duas linhas de código.

Answer 3

Outra maneira de fazer animações simultâneas, se você quiser chamá-los separadamente (por exemplo. A partir de código diferente) é usar queue. Novamente, como com a resposta de Tinister você teria que usar animado para isso e não fadeIn:

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

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