Enchaînement animations jQuery

Question

j'ai le code venir que les animations chaînes ensemble (à savoir se déplacer à gauche, puis déplacez à droite).

J'ai 20 des étiquettes <li> disposées dans une grille et j'anime le <ul> principal pour déplacer le <li> requis en vue.

Code:
x et y sont coordonnées,
howFast est de 1200,
easeItIn est réglé sur "easeOutBounce"

if ($(window).width()<1259) { 
    if (screenFlipMode == "chained") { 
    (function(x, y) { //Small Chained 
     $('.elements').animate({ 
     top: y+'px' 
     }, howFast, easeItIn,function() { 
     $('.elements').animate({ 
      left: x+'px' 
     }, howFast, easeItIn); 
     }); 
    })(x,y); 
} 

Maintenant, le problème que je ont est que si je veux passer de la première à la deuxième <li><li> alors il essaie toujours de déplacer l'axe Y. (ce qui signifie que je dois attendre 1200m/s jusqu'à ce que l'axe X l'animation entre en jeu).

Alors ... gens charmants ... Ma question est, comment puis-je écrire une clause if qui dirait "si la cible <li> est sur la même ligne, alors ne faites pas l'animation Y-Axis ... ?

[EDIT] Ma grille est configuré comme suit, je veux désactiver la personne à charge si la destination suivante axe Y ou X-Axis est sur la même ligne. (image ci-dessous).

alt text http://demo.squeezedigital.com/barrie-test/jquery-grid.gif

>. <

Answer 1

animations sont mises en attente par défaut, donc il n'y a pas de point dans l'application de la deuxième animation au sein du rappel de la première animation.

En utilisant filter() vous pouvez filtrer tous les éléments qui ne sont pas sur la même ligne et ne leur sont applicables l'animation y, vous pouvez appliquer l'animation x à toute la collection.

$('.elements') 
    .filter(function(){ 
     return $(this).offset().top !== y; 
    }) 
    .animate({ 
     top: y 
    }, howFast, easeItIn) 
    .end().animate({ 
     left: x 
    }, howFast, easeItIn); 

Answer 2

Vous pouvez peut-être résoudre ce problème sans une déclaration if. Il suffit d'adapter votre selector pourrait vous aider. Par exemple.

$('.elements:first-child') 

par exemple. Une autre pourrait être

$('table').find('tr').find('.elements:nth-child(2)') 

jQuery selectors

Answer 3

La clé ici est que vous pouvez animer plusieurs propriétés en même temps. Alors, retirez votre fonction de rappel, et il suffit d'ajouter une autre propriété aux params de la première animation:

if ($(window).width()<1259) 
{ 
    if (screenFlipMode == "chained") 
    { 
     function(x, y) 
     { //Small Chained 
      $('.elements').animate({ 
       top: y, 
       left: x 
      }, howFast, easeItIn) 
     }(x,y); 
    } 
} 

Si l'immeuble est déjà à cette valeur, il ne sera pas nécessaire de changer, et donc que la propriété a gagné » t animer. L'autre animera quand même. En outre, jQuery traite automatiquement les valeurs numériques en tant que pixes lors de l'utilisation de animate(), il n'est donc pas nécessaire d'ajouter "px". Cela peut effectivement nuire à votre performance.