Comment exécuter deux animations jQuery simultanément?

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

Je dois 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 à laquelle je pourrais penser serait d'utiliser setTimeoutune fois pour chaque animation, mais je ne pense pas que ce soit la meilleure solution.

Oui il y a!

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

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

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 les animations en file d'attente. pour pouvoir les exécuter simultanément, vous utiliseriez une seule ligne.

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

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

Je pense avoir trouvé la solution dans la documentation jQuery:

Anime tous les paragraphes avec un style de gauche de 50 et une opacité de 1 (opaque, visible), terminant l'animation en moins de 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 }); 

simplement ajouter: queue: false.

Si vous exécutez les éléments ci-dessus tels quels, 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>

S'il est vrai que des appels consécutifs à l'animation donneront l'apparence qu'ils exécutent en même temps, la vérité sous-jacente est que ces animations distinctes s'exécutent très près du parallèle.

Pour vous assurer que les animations fonctionnent en même temps, utilisez:

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

D'autres animations peuvent être ajoutées à la file d'attente «my-animation» et toutes peuvent être lancées à condition que la dernière animation les supprime.

À la vôtre, Anthony

Voir ce brillant article de blog sur l'animation des valeurs dans les objets .. vous pouvez ensuite utiliser les valeurs pour animer ce que vous voulez, 100% simultanément!

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

Je l'ai utilisé comme ceci pour glisser dedans / dehors:

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

Publier ma réponse pour aider quelqu'un, la réponse la mieux notée n'a pas résolu mon scrupule.

Lorsque j'ai implémenté ce qui suit [à partir de la première réponse], mon animation de défilement vertical a juste tremblé d'avant en arrière:

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

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

J'ai fait référence à: W3 Schools Set Interval et cela a résolu mon problème, à savoir la section 'Syntaxe':

setInterval (fonction, millisecondes, param1, param2, ...)

Ayant mes paramètres du formulaire { duration: 200, queue: false } forcé une durée de zéro et il n'a regardé que les paramètres à titre indicatif.

Le long et le court, voici mon code, si vous voulez comprendre pourquoi cela fonctionne, lisez le lien ou analysez les paramètres d'intervalle attendus:

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

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

Où 'autoScroll' est:

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

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

Bon codage!