Como executar duas animações jQuery simultaneamente?

É possível executar duas animações em dois elementos diferentes simultaneamente? Eu preciso do oposto desta pergunta Jquery animações de filas .

Eu preciso fazer algo assim ...

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

mas para executar esses dois ao mesmo tempo. A única coisa que eu conseguia pensar seria usar setTimeoutuma vez para cada animação, mas não acho que seja a melhor solução.

sim existe!

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

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

Isso seria executado simultaneamente sim. e se você quisesse executar duas animações no mesmo elemento simultaneamente?

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

Isso acaba enfileirando as animações. para executá-los simultaneamente, você usaria apenas uma linha.

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

Existe alguma outra maneira de executar duas animações diferentes no mesmo elemento simultaneamente?

Acredito que encontrei a solução na documentação do jQuery:

Anima todo o parágrafo para um estilo esquerdo de 50 e opacidade de 1 (opaco, visível), completando a animação em 500 milissegundos. Ele também fará isso fora da fila, o que significa que será iniciado automaticamente sem aguardar a sua vez .

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

basta adicionar: queue: false.

Se você executar o que está acima, eles parecerão executar simultaneamente.

Aqui está um código de teste:

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

Embora seja verdade que chamadas consecutivas para animar darão a aparência de que estão sendo executadas ao mesmo tempo, a verdade subjacente é que são animações distintas sendo executadas muito próximas do paralelo.

Para garantir que as animações estejam sendo executadas ao mesmo tempo, use:

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

Mais animações podem ser adicionadas à fila 'minha animação' e todas podem ser iniciadas, desde que a última animação seja removida.

Cheers, Anthony

Veja esta brilhante postagem no blog sobre como animar valores em objetos. Em seguida, você pode usá-los para animar o que quiser, 100% simultaneamente!

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

Eu usei assim para deslizar dentro / fora:

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

Ao postar minha resposta para ajudar alguém, a resposta mais votada não resolveu meu problema.

Quando implementei o seguinte [da resposta superior], minha animação de rolagem vertical tremeu de um lado para o outro:

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

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

Eu me referi a: W3 Schools Set Interval e resolveu meu problema, a saber, a seção 'Sintaxe':

setInterval (função, milissegundos, param1, param2, ...)

Ter meus parâmetros do formulário { duration: 200, queue: false }forçou uma duração de zero e ele olhou apenas os parâmetros para orientação.

A longo e curto, aqui está o meu código, se você quiser entender por que ele funciona, leia o link ou analise os parâmetros de intervalo esperado:

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

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

Onde 'autoScroll' é:

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

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

Feliz codificação!