Comment exécuter deux animations jQuery simultanément?


211

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.


Euh ... tu l'as essayé? Si vous utilisez le code exact que vous avez là, à ma connaissance du animate()fonctionnement, ils devraient s'exécuter simultanément.
chaos

C'est parti - jsbin.com/axata . Ajouter / modifier pour voir le code
Russ Cam

J'ai un vrai problème lors de l'animation de différentes propriétés CSS. Cette question semble ancienne, et je l'ai mise dans le JSFiddle, semble que les deux approches fonctionnent. Est-ce toujours pertinent? jsfiddle.net/AVsFe
valk

3
Dans jquery actuel, et je crois que depuis jQuery 1.4, le code ci-dessus anime les deux simultanément, car les files d'attente fx sont attachées à l'élément que vous appelez .animate (), pas une file d'attente globale.
Chris Moschini

Ci-dessus jsbin est mort. jsfiddle of same, that works: jsfiddle.net/b9chris/a8pwbhx1
Chris Moschini

Réponses:


418

Oui il y a!

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

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

15
Merci pour cela, je ne connaissais pas cette queuevariable!
dotty

4
Puis-je demander quel est le but de passer une fonction à jQuery?
pilau

13
@pilau Il sera exécuté lorsque le document sera prêt. Il s'agit d'un raccourci pour $ (document) .ready (function () {}); et vous permet de mettre votre code javascript avant la définition de votre élément.
Raphael Michel

1
oui, vous pouvez manger définir la file d'attente sur vrai / faux, ou lui donner une chaîne (nom-file d'attente) de cette façon, les deux animations utilisent le même temporisateur ...
AlexK

3
Comment ajouteriez-vous un onComplete à cela?
jmchauv

19

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?


9

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.


1
Comment intégrer la fonction complète sur celui-ci? : s
Brainfeeder

8

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>

3

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


2

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


0

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!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.