Come si dissolvono e si animano allo stesso tempo?

Question

Uso di jQuery Sto creando un'animazione di base 'tooltip' in modo che il suggerimento apparirà in una piccola animazione in cui sfuma in vista e si sposta verticalmente.

Finora ho questo:

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

Farlo in questo modo o in questo modo:

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

Le animazioni verranno eseguiti uno alla volta, la dissolvenza in 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 di lavorare su display: none elementi (come fadeIn fa). Quindi, potrebbe essere necessario mettere questo in anticipo: (es. Da codice diverso)

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

Answer 2

Un altro modo per fare le animazioni simultanee se si desidera chiamare separatamente è quello di utilizzare queue. Anche in questo caso, come con la risposta di Tinister si dovrebbe utilizzare animare per questo e non fadeIn:

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

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

Answer 3

Per le persone ancora in cerca di un paio di anni dopo, le cose sono cambiate un po '. È ora possibile utilizzare la queue per .fadeIn() pure in modo che funziona in questo modo:

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

Questo ha il vantaggio di lavorare su display: none elementi in modo non è necessario l'extra due righe di codice.