Come eseguire due animazioni jQuery contemporaneamente?

È ansible eseguire due animazioni su due elementi diversi contemporaneamente? Ho bisogno del contrario di questa domanda Jquery con le animazioni in coda .

Devo fare qualcosa del genere …

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

ma per eseguire questi due allo stesso tempo. L’unica cosa che potrei pensare sarebbe usare setTimeout una 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 }); }); 

Ciò funzionerebbe simultaneamente sì. e se volessi eseguire due animazioni sullo stesso elemento contemporaneamente?

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

Questo finisce per mettere in coda le animazioni. per eseguirli simultaneamente si usa solo una riga.

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

C’è un altro modo per eseguire due diverse animazioni sullo stesso elemento contemporaneamente?

Se esegui quanto sopra, appariranno per funzionare simultaneamente.

Ecco alcuni codici di test:

   

Credo di aver trovato la soluzione nella documentazione di jQuery:

Animate tutti i paragrafi in uno stile di sinistra di 50 e opacità di 1 (opaco, visibile), completando l’animazione entro 500 millisecondi. Lo farà anche fuori dalla coda, il che significa che inizierà automaticamente senza aspettare il suo turno .

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

semplicemente aggiungi: queue: false .

Guarda questo brillante post sul blog sull’animazione dei valori negli oggetti .. puoi quindi utilizzare i valori per animare qualsiasi cosa tu voglia, al 100% contemporaneamente!

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

L’ho usato in questo modo per scivolare 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'); } }); } 

Anche se è vero che le chiamate consecutive ad animare danno l’aspetto che stanno eseguendo allo stesso tempo, la verità sottostante è che sono animazioni distinte che funzionano molto vicino al parallelo.

Per assicurare che le animazioni funzionino contemporaneamente allo stesso tempo:

 $(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’ultima animazione rimandi le loro animazioni.

Ciao, Anthony