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


211

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

Necesito hacer algo como esto ...

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

pero para correr esos dos al mismo tiempo. Lo único en lo que podía pensar sería usar setTimeoutuna vez para cada animación, pero no creo que sea la mejor solución.


Erm ... ¿lo has intentado? Si utiliza el código exacto que tiene allí, según tengo entendido de cómo animate()funciona, deberían ejecutarse simultáneamente.
caos

Aquí vamos: jsbin.com/axata . Agregar / editar para ver el código
Russ Cam

Tengo un problema real al animar diferentes propiedades CSS. Esta pregunta parece vieja, y la puse en el JSFiddle, parece que ambos enfoques funcionan. ¿Sigue siendo relevante? jsfiddle.net/AVsFe
valk

3
En jquery actual, y creo que desde jQuery 1.4, el código anterior anima ambos simultáneamente, ya que las colas fx están unidas al elemento al que llamas .animate (), no a una cola global.
Chris Moschini

Por encima de jsbin está muerto. jsfiddle de lo mismo, eso funciona: jsfiddle.net/b9chris/a8pwbhx1
Chris Moschini

Respuestas:


418

¡sí hay!

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

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

15
Gracias por esto, no sabía sobre esa queuevariable!
dotty

44
¿Puedo preguntar cuál es el propósito de pasar una función a jQuery?
pilau

13
@pilau Se ejecutará cuando el documento esté listo. Esta es una abreviatura de $ (document) .ready (function () {}); y le permite poner su código javascript antes de la definición de su elemento.
Raphael Michel

1
Sí, puede configurar cola en verdadero / falso, o darle una cadena (nombre de cola) de esta manera, ambas animaciones usan el mismo temporizador ...
AlexK

3
¿Cómo agregarías un onComplete a esto?
jmchauv

19

Eso correrí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, usaría solo una línea.

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

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


9

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

sólo tiene que añadir: queue: false.


1
¿Cómo integrar la función completa en este? : s
Brainfeeder

8

Si ejecuta lo anterior tal como está, parecerá que se ejecuta 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>

3

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 animaciones distintas que se ejecutan muy cerca del paralelo.

Para asegurarse de 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 se pueden iniciar siempre que la última animación las elimine.

Saludos, Anthony


2

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


0

Al publicar mi respuesta para ayudar a alguien, la respuesta mejor calificada no resolvió mi reparo.

Cuando implementé lo siguiente [de la respuesta superior], mi animación de desplazamiento vertical simplemente se movió de un lado a otro:

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

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

Me referí a: W3 Schools Set Interval y resolvió mi problema, a saber, la sección 'Sintaxis':

setInterval (función, milisegundos, param1, param2, ...)

Tener mis parámetros de la forma { duration: 200, queue: false }forzó una duración de cero y solo miró los parámetros como guía.

A largo y corto, aquí está mi código, si desea comprender por qué funciona, lea el enlace o analice los parámetros esperados del intervalo:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

Donde 'autoScroll' es:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

¡Feliz codificación!

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.