Come si dissolvono e si animano allo stesso tempo?

Question

Usando jQuery sto creando un'animazione di base 'tooltip' in modo che la descrizione dei comandi appaia in una piccola animazione in cui svanisce e si sposta verticalmente.

Finora ho questo:

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

In questo modo o in questo modo:

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

Le animazioni verranno eseguite una alla volta, la dissolvenza prima e poi l'animazione verticale. C'è un modo per farlo fare entrambi allo stesso tempo?

Answer 1

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

Tuttavia, questo non sembra funzionare sugli elementi display: none (come fa fadeIn ). Quindi, potresti aver bisogno di metterlo in anticipo:

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

Answer 2

Per le persone che cercano ancora un paio d'anni dopo, le cose sono cambiate un po '. Ora puoi usare la coda anche per .fadeIn () in modo che funzioni così:

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

Questo ha il vantaggio di lavorare sugli elementi display: none , quindi non hai bisogno delle due righe di codice in più.

Answer 3

Un altro modo per realizzare animazioni simultanee se si desidera chiamarle separatamente (ad es. da un codice diverso) è utilizzare coda . Ancora una volta, come con la risposta di Tinister, dovresti usare animate per questo e non svanireIn:

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

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