ejemplos de ejecutar dos animaciones simultáneamente con JQuery

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

ejemplos de ejecutar dos animaciones simultáneamente con JQuery

normalmente las animaciones se ejecutan una detrás de otra conforme se va leyendo el código cuándo termina una y empieza la siguiente cómo has podido ver en alguna entrada desde blog

en el siguiente ejemplo aprendes cómo ejecutar varias animaciones al mismo tiempo o simultáneamente con jQuery  y el método animate().

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#uno").animate({
   width: '500px'}, { duration: 2000, queue: false });

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

});
});
</script>
</head>
<body>

<button>Empezar</button>

<div id="uno" style="background:#74DEFF;height:50px;width:220px; font-size:24px;">Videotutoriales.es</div>
<div id="dos" style="background:#FF0004;height:50px;width:220px; font-size:24px;">Videotutoriales.es</div>
</body>
</html>

como puedes ver al final del código en el apartado del body tenemos un botón qué pone el texto empezar y dos cajas o DIVS identificados como uno y dos,  y hemos modificado propiedades CSS como el color de fondo la altura la anchura y la fuente.

y en el apartado del Heat tenemos la programación de JavaScript la cual empieza llamando a la librería de jQuery y ya llama al evento del documento

dentro de él identificamos el botón y utilizamos su evento Click para animar los dos elementos que tenemos identificandos

En cada uno de ellos utilizamos el método animate y entre llaves ponemos la propiedad o propiedades que queremos animar en este caso la anchura ponemos una coma “,”  y otra vez entre llaves dos propiedades …. la duración en milisegundos una coma “,” y lo más importante la propiedad “queue:  false”  ….. la cual hace que la animación no esté en la cola es decir no espere a que acabe la siguiente para ejecutarse de esta manera puedes ejecutar animaciones simultáneamente o al mismo tiempo