ejemplos - jquery show effects examples

¿Cómo se funden y animan al mismo tiempo?

Question

Utilizando 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 difumine para ver y se mueva verticalmente.

Hasta ahora tengo esto:

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

Haciéndolo de esa manera o de esta manera:

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

Las animaciones se ejecutarán de una en una, la atenuación primero y luego la animación vertical. ¿Hay alguna manera de hacer que ambos hagan al mismo tiempo?

Answer 1

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

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

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

Answer 2

Para las personas que siguen buscando un par de años más tarde, las cosas han cambiado un poco. Ahora puedes usar la queue para .fadeIn() también para que funcione así:

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

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

Answer 3

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

Sin embargo, esto no parece funcionar en la display: none elementos (como hace fadeIn ). Por lo tanto, es posible que tengas que poner esto de antemano:

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