¿Cómo te desvaneces y animas al mismo tiempo?

Question

Usando 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 y se mueve verticalmente.

Hasta ahora tengo esto:

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

Haciéndolo de esta manera o de esta manera:

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

Las animaciones se ejecutarán una a la vez, primero se desvanecerá y luego la animación vertical. ¿Hay alguna manera de hacer ambas cosas al mismo tiempo?

Answer 1

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

Sin embargo, esto no parece funcionar en la pantalla : ninguno (como lo hace fadeIn ). Por lo tanto, es posible que deba poner esto de antemano:

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

Answer 2

Para las personas que todavía buscan un par de años después, las cosas han cambiado un poco. Ahora puede usar la cola para .fadeIn () para que funcione así:

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

Esto tiene la ventaja de trabajar en la pantalla : none para que no necesite las dos líneas de código adicionales.

Answer 3

Otra forma de hacer animaciones simultáneas si desea llamarlas por separado (por ejemplo, desde un código diferente) es usar queue . Nuevamente, como con la respuesta de Tinister, tendría que usar animar para esto y no desvanecerse:

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

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