cómo animar dos cosas al mismo tiempo en jquery

Question

Quiero animar 2 cosas al mismo tiempo cuando el mouse pasa algo.

por ejemplo Quiero cambiar el color de fondo de box1 con id = "box1" y la posición de box2 con id = "box2" cuando el mouse coloca un div con id = "trigger".

pero no quiero que se animen en una cola, es decir, una detrás de otra. ¡Quiero que comiencen a animar al mismo tiempo y terminen al mismo tiempo!

Answer 1

Sólo ellos puede ejecutar en una fila, así:

$("#trigger").hover(function() { 
    $("#box1").stop().animate({ backgroundColor: '#000000' }); 
    $("#box2").stop().animate({ top: "-20px" }); 
}, function() { 
    $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back 
    $("#box2").stop().animate({ top: "0px" });     //set it back 
}); 

Este utiliza .hover() para animar una forma cuando se cierne, y animar a vuelta al salir. El .stop() es solo para prevenir la creación de cola de animación. Para animar un color, necesitará the color plugin, o jQuery UI incluido también.

animaciones en jQuery, .animate(), utilizando are implementedsetInterval() con un temporizador de 13 ms, por lo que va a pasar fuera del flujo normal ... haciendo de ellos como anteriormente no esperar a que el primero en terminar, van a ejecutar de forma simultánea.

Answer 2

Cuando se inicia la primera animación, la siguiente línea de código se ejecuta sin esperar a que termine la animación.

Así que hacer dos cosas a la vez:

$('#trigger').hover(function() 
{ 
    $('#box1').animate({ ... }); 
    $('#box2').animate({ ... }); 
}); 

Answer 3

Salida jQuery.animate() docs. Hay queue propiedad:

queue: Un valor booleano que indica si poner la animación en la cola de efectos. Si false, la animación comenzará inmediatamente.

Answer 4

Si bien es cierto que las llamadas consecutivas a la animación darán la apariencia de que se están ejecutando al mismo tiempo, la verdad subyacente es que son animaciones distintas que se ejecutan muy cerca de paralelo.

para asegurar que las animaciones son de hecho funcionan al mismo uso del tiempo:

$('#trigger').hover(function() { 
    $('#box1').animate({..., queue: 'trigger-hover'}); 
    $('#box2').animate({..., queue: 'trigger-hover'}).dequeue('trigger-hover'); 
}); 

Otras animaciones pueden ser añadidos a la cola 'gatillo fácil flotar' y todos pueden ser iniciadas siempre la última animación de quitar de la cola son ellos.

Saludos, Anthony