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

¿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.

¡sí hay!

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

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

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?

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.

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>

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

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

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!