web-dev-qa-db-fra.com

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 animations de file d'attente Jquery .

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 à laquelle je pouvais penser serait d’utiliser setTimeout une fois pour chaque animation, mais je ne pense pas que ce soit la meilleure solution.

javascriptjqueryanimation
205
Jakub Arnold

oui il y a!

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

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

Cela fonctionnerait simultanément oui. Et si vous vouliez exécuter deux animations sur le même élément simultané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 deux animations différentes sur le même élément simultanément?

19
Waseem

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

Anime tous les paragraphes dans un style de gauche de 50 et une opacité de 1 (opaque, visible), complétant ainsi l’animation en 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.

8
user697709

Si vous exécutez les opérations ci-dessus telles qu'elles sont, elles sembleront fonctionner 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>
8
Andreas Grech

Découvrez ce brillant article de blog sur l'animation de valeurs dans des objets. Vous pouvez ensuite utiliser ces valeurs pour animer tout 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 ça 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');
                }
            });
        }
2
Erik Schoel

S'il est vrai que des appels consécutifs à animer donneront l'impression qu'ils s'exécutent en même temps, la vérité sous-jacente est qu'ils sont des animations distinctes très proches 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 en ait une.

Cordialement, Anthony

2
Borgboy

En affichant ma réponse pour aider quelqu'un, la réponse la mieux notée n'a pas résolu mon problème.

Lorsque j'ai implémenté ce qui suit [à partir de la réponse du haut], mon animation de défilement vertical a simplement tremblé:

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

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

Je me suis référé à: W3 Schools Set Interval et cela a résolu mon problème, à savoir la section "Syntaxe":

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

Avoir mes paramètres de la forme { duration: 200, queue: false } forçait une durée de zéro et ne regardait que les paramètres.

En résumé, 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);

Bonne codage!

0
EGC