¿Cómo se desvaneceIn y se anima al mismo tiempo?

Question

Uso de jQuery Estoy creando una animación básica de "información sobre herramientas" para que la información sobre herramientas aparezca en una pequeña animación en la que se desvanece a la vista y se mueve verticalmente.

Hasta ahora tengo esto:

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

Hacerlo de esa manera o de esta manera:

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

Las animaciones se ejecutará uno a la vez, la aparición gradual de la primera y luego la animación verticales . ¿Hay alguna forma de que haga ambas cosas al mismo tiempo?

Answer 1

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

Sin embargo, esto no parece trabajar en display: none elementos (como se hace fadeIn). Por lo tanto, es posible que tenga que poner esto de antemano: (. Por ejemplo, de código diferente)

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

Answer 2

Otra forma de hacer animaciones simultáneas si desea llamar a ellos por separado es utilizar queue. De nuevo, como con la respuesta de Tinister que tendría que utilizar animado por esto y no fadeIn:

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

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

Answer 3

Para las personas que buscan todavía un par de años después, las cosas han cambiado un poco. Ahora puede utilizar el queue para .fadeIn(), así por lo que va a trabajar de esta manera:

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

Esto tiene la ventaja de trabajar en display: none elementos por lo que no necesita las dos líneas adicionales de código.