pagina - llamar javascript desde html

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

Question

¿Es posible ejecutar dos animaciones en dos elementos diferentes simultáneamente? Necesito lo contrario de esta pregunta Jquery haciendo en cola las animaciones .

Necesito hacer algo como esto ...

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

Pero para ejecutar esos dos al mismo tiempo. Lo único en lo 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

Creo que encontré la solución en la documentación de jQuery:

Anima todos los párrafos a un estilo izquierdo de 50 y una opacidad de 1 (opaco, visible), completando la animación en 500 milisegundos. También lo hará fuera de la cola, lo que significa que se iniciará automáticamente sin esperar su turno .

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

simplemente añada: queue: false .

Answer 3

Eso se ejecutaría simultáneamente sí. ¿Qué pasaría si quisieras ejecutar dos animaciones en el mismo elemento simultáneamente?

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

Esto termina haciendo cola las animaciones. para ejecutarlos simultáneamente solo usarías una línea.

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

¿Hay alguna otra manera de ejecutar dos animaciones diferentes en el mismo elemento simultáneamente?

Answer 4

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

Para asegurar que las animaciones se estén ejecutando al mismo tiempo, use:

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

Se pueden agregar más animaciones a la cola ''my-animation'' y todas pueden iniciarse siempre y cuando las últimas animaciones de la cola sean de ellas.

Saludos, Anthony

Answer 5

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

Aquí hay un 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 6

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

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

Lo he usado así para deslizar dentro / fuera:

 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'');
}
});
}