Come eseguire due animazioni jQuery contemporaneamente?

Question

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

ho bisogno di fare qualcosa di simile ...

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

ma per eseguire quei 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.

Answer 1

sì, c'è!

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

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

Answer 2

Se si esegue quanto sopra così come sono, sembreranno eseguire simultaneamente.

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

Answer 3

che avrebbe eseguito contemporaneamente sì. e se volessi 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 eseguirli simultaneamente si utilizzerà solo una riga.

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

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

Answer 4

Credo che ho trovato la soluzione nella documentazione jQuery:

anima tutti comma ad uno stile sinistra di 50 e l'opacità di 1 (opaco, visibile), completando l'animazione all'interno 500 millisecondi. Lo farà anche fuori dalla coda, ovvero si avvierà automaticamente senza in attesa del suo turno.

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

semplicemente aggiungere: queue: false.

Answer 5

Vedere questo brillante post sul blog sull'animazione dei valori negli oggetti .. è quindi possibile utilizzare i valori per animare tutto ciò che si desidera, al 100% contemporaneamente!

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

ho usato come questo per far scorrere in/out:

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

Answer 6

Mentre è vero che le chiamate successive per animare darà l'apparenza sono in esecuzione allo stesso tempo, il la verità di fondo è che sono animazioni distinte che corrono molto vicino al parallelo.

per assicurare le animazioni sono infatti in esecuzione allo stesso tempo utilizzare:

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

ulteriori animazioni possono essere aggiunti alla coda 'my-animation' e tutti possono essere avviate fornito l'ultima animazione dequeue Sono loro.

Cheers, Anthony