Come eseguire due animazioni jQuery contemporaneamente?

È possibile eseguire contemporaneamente due animazioni su due diversi elementi? Ho bisogno del contrario di questa domanda animazioni di accodamento di Jquery .

Devo fare qualcosa del genere ...

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

ma per eseguire quei due allo stesso tempo. L'unica cosa che mi viene in mente sarebbe usare setTimeoutuna volta per ogni animazione, ma non penso che sia la soluzione migliore.

si C'è!

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

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

Sarebbe eseguito contemporaneamente sì. cosa succede se si desidera eseguire contemporaneamente due animazioni sullo stesso elemento?

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

Questo finisce per mettere in coda le animazioni. per farli funzionare simultaneamente useresti solo una riga.

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

Esiste un altro modo per eseguire contemporaneamente due diverse animazioni sullo stesso elemento?

Credo di aver trovato la soluzione nella documentazione di jQuery:

Anima tutto il paragrafo con uno stile sinistro di 50 e l'opacità di 1 (opaco, visibile), completando l'animazione entro 500 millisecondi. Lo farà anche fuori dalla coda, il che significa che si avvierà automaticamente senza attendere il suo turno .

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

è sufficiente aggiungere: queue: false.

Se esegui quanto sopra così com'è, sembreranno funzionare simultaneamente.

Ecco un po 'di codice di prova:

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

Mentre è vero che le chiamate consecutive all'animazione daranno l'apparenza che stanno eseguendo allo stesso tempo, la verità sottostante è che sono animazioni distinte che corrono molto vicino al parallelo.

Per assicurarsi che le animazioni siano effettivamente in esecuzione allo stesso tempo, utilizzare:

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

Ulteriori animazioni possono essere aggiunte alla coda 'my-animation' e tutte possono essere avviate a condizione che l'ultimo dequeue di animazione sia loro.

Saluti, Anthony

Vedi questo brillante post sul blog sull'animazione dei valori negli oggetti .. puoi quindi utilizzare i valori per animare quello che vuoi, al 100% contemporaneamente!

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

L'ho usato in questo modo per scorrere dentro / fuori:

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

Pubblicando la mia risposta per aiutare qualcuno, la risposta più votata non ha risolto il mio problema.

Quando ho implementato quanto segue [dalla risposta in alto], la mia animazione con scorrimento verticale si muoveva avanti e indietro:

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

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

Ho fatto riferimento a: W3 Schools Set Interval e ha risolto il mio problema, vale a dire la sezione "Sintassi":

setInterval (funzione, millisecondi, param1, param2, ...)

Avere i miei parametri del modulo ha { duration: 200, queue: false }forzato una durata di zero e ha solo guardato i parametri per una guida.

Il lungo e il corto, ecco il mio codice, se vuoi capire perché funziona, leggi il link o analizza i parametri previsti dell'intervallo:

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

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

Dove si trova "autoScroll":

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

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

Buona programmazione!