¿Cómo ejecutar dos animaciones de jQuery simultáneamente?

Question

¿Es posible ejecutar dos animaciones en dos elementos diferentes al mismo tiempo? Necesito el opuesto de esta pregunta Jquery queueing animations.

Necesito hacer algo como esto ...

$('#first').animate({ width: 200 }, 200); 
$('#second').animate({ width: 600 }, 200); 

sino para ejecutar los dos al mismo tiempo. Lo único que podría pensar sería usar setTimeout una vez para cada animación, pero no creo que sea la mejor solución.

Answer 1

sí, hay!

$(function() { 
    $("#first").animate({ 
     width: '200px' 
    }, { duration: 200, queue: false }); 

    $("#second").animate({ 
     width: '600px' 
    }, { duration: 200, queue: false }); 
}); 

Answer 2

Si ejecuta lo anterior tal como es, parecerá que se ejecutan simultáneamente.

Aquí hay algo de código de prueba:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
$(function() { 
    $('#first').animate({ width: 200 }, 200); 
    $('#second').animate({ width: 600 }, 200); 
}); 
</script> 
<div id="first" style="border:1px solid black; height:50px; width:50px"></div> 
<div id="second" style="border:1px solid black; height:50px; width:50px"></div> 

Answer 3

que se ejecutan al mismo tiempo sí. ¿Qué pasaría si quisiera ejecutar dos animaciones en el mismo elemento simultáneamente?

$(function() { 
    $('#first').animate({ width: '200px' }, 200); 
    $('#first').animate({ marginTop: '50px' }, 200); 
}); 

Esto termina haciendo cola en las animaciones. para llegar a ejecutarlos simultáneamente, usaría solo una línea.

$(function() { 
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200); 
}); 

¿Hay alguna otra manera de ejecutar dos animaciones diferentes en el mismo elemento al mismo tiempo?

Answer 4

creo que he encontrado la solución en la documentación de jQuery:

anima todo el párrafo a un estilo de izquierda de 50 y la opacidad de 1 (opaco, visible), completando la animación dentro 500 milisegundos. También lo hará hacerlo fuera de la cola, lo que significa que se iniciará automáticamente sin esperando su turno.

$("p").animate({ 
    left: "50px", opacity: 1 
}, { duration: 500, queue: false }); 

simplemente añadir: queue: false.

Answer 5

Vea esta brillante publicación en el blog sobre la animación de valores en objetos ... ¡puede usar los valores para animar lo que quiera, al 100% simultáneamente!

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

lo he usado como este para deslizarse de entrada/salida:

 slide : function(id, prop, from, to) { 
      if (from < to) { 
       // Sliding out 
       var fromvals = { add: from, subtract: 0 }; 
       var tovals = { add: to, subtract: 0 }; 
      } else { 
       // Sliding back in 
       var fromvals = { add: from, subtract: to }; 
       var tovals = { add: from, subtract: from }; 
      } 

      $(fromvals).animate(tovals, { 
       duration: 200, 
       easing: 'swing', // can be anything 
       step: function() { // called on every step 
        // Slide using the entire -ms-grid-columns setting 
        $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr'); 
       } 
      }); 
     } 

Answer 6

Si bien es cierto que las llamadas consecutivas para animar va a dar la apariencia de que se están ejecutando al mismo tiempo, la 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:

$(function() { 
    $('#first').animate({..., queue: 'my-animation'}); 
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation'); 
}); 

Otras animaciones pueden ser añadidos a la cola 'mi-animación' y todos pueden ser iniciadas siempre la última animación de quitar de la cola son ellos.

Cheers, Anthony