Javascript Girl
  1. Javascript Girl
  3. Existe-t-il un moyen de créer deux animations jQuery (correctement) simultanément?
Intereting Posts
Comment recharger automatiquement une page après une période d'inactivité donnée FindQuery () ne fonctionne pas dans les données de braser? Obtenir la position de défilement en utilisant jquery Stocker le fichier image dans les données binaires dans le schéma de mangouste et afficher l'image sous forme html TypeError: node.setAttribute n'est pas une fonction Comment cacher / afficher les balises div via JavaScript? Comment vous moquez-vous du service Angulaire qui est une fonction? Comment faire taire tous les sons d'une page avec JS? Désactivez la sélection du texte tout en appuyant sur 'shift' Un exemple en cours d'exécution ou une démonstration de fonctionnement du modèle d'interface en JavaScript Comment appeler la fonction de JavaScript depuis la servlet Erreur lors de l'appel de la méthode javascript à partir de l'applet Mutation Observer ne reçoit qu'un contenu spécifique Différence entre $ (fenêtre) .width () vs $ (document) .width () Javascript convertit de la chaîne d'époque à l'objet Date

Existe-t-il un moyen de créer deux animations jQuery (correctement) simultanément?

J'ai un auditeur d'événements qui appelle deux actions d'animation. Malheureusement, leurs démarrages sont échelonnés par une petite quantité (par exemple, le premier de la fonction commence en premier).

Est-ce que quelqu'un connait un moyen de les synchroniser correctement?

Voici mon code: 

$("#nav ul li a").hover( function(){ $(lastBlock).children("div").animate({width: "0px"}, { queue:false, duration:400, easing:"swing" }); $(this).children("div").animate({width: maxWidth+"px"}, { queue:false, duration:400, easing:"swing"}); lastBlock = this; } );

Parce que la première animation se déroule légèrement avant la seconde, elle fait que la largeur totale devient momentanément inégale, ce qui semble un peu génial.

Il y a eu une discussion récente sur ce sujet exact sur la liste des développeurs jQuery. Ils ont créé quelques cas de test que vous pourriez regarder. Spécialement le test Johns.

Voici le sujet de discussion btw.

L'astuce consiste à avoir un seul intervalle / rappel dans lequel tous les éléments sont mis à jour. Vous pouvez trouver un exemple dans ma publication ici:

Puis-je implémenter un rappel avec chaque étape d'animation de jQuery?

Ce que vous finissez est essentiellement: 

 var el1 = $("#element1"); var el2 = $("#element2"); var animation = new AnimationTimeline( { easing: "swing" , onstep: function( stepValue, animprops ) { // This is called for every animation frame. Set the elements: el1.css( { left: ..., top: ... } ); el2.css( { left: ..., top: ... } ); } }); // And start it. animation.start();