Comment exécuter deux animations jQuery simultanément?

Question

Est-il possible d'exécuter deux animations simultanément sur deux éléments différents? J'ai besoin de l'opposé de cette question Jquery animations queue .

J'ai besoin de faire quelque chose comme ça ...

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

mais pour exécuter ces deux en même temps. La seule chose que je pourrais penser serait d'utiliser setTimeout une fois pour chaque animation, mais je ne pense pas que ce soit la meilleure solution.

Answer 1

Oui, il y a.

Answer 2

Euh ... l'avez-vous essayé? Si vous utilisez le code exact que vous avez là, à ma connaissance de comment fonctionne animate() , ils devraient fonctionner simultanément.

Answer 3

Cela fonctionnerait simultanément oui. Et si vous vouliez exécuter deux animations simultanément sur le même élément?

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

Cela finit par mettre en file d'attente les animations. pour les faire fonctionner simultanément, vous n'utiliseriez qu'une seule ligne.

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

Existe-t-il un autre moyen d'exécuter deux animations différentes sur le même élément simultanément?

Answer 4

Je crois avoir trouvé la solution dans la documentation de jQuery:

Anime tous les paragraphes avec un style gauche de 50 et une opacité de 1 (opaque, visible), complétant l'animation dans les 500 millisecondes. Il le fera également en dehors de la file d'attente, ce qui signifie qu'il démarrera automatiquement sans attendre son tour .

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

ajoutez simplement: queue: false .

Answer 5

Si vous exécutez les éléments ci-dessus tels qu'ils sont, ils sembleront s'exécuter simultanément.

Voici un code de test:

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