Ajout à une file d'attente callbacks d'animation - jQuery

Question

je dois synchroniser fonctionnalité avec diverses animations ... malheureusement les files d'attente jQuery ne représentent que des animations d'un certain objet.

jQuery offre la possibilité d'ajouter des callbacks, mais je ne peux pas transmettre toutes les variables externes.

---

Voici un code !!! =)

var unicorn_actions = [...]; 
for(var i=0; i<unicorn_actions.length; i++){ 
    var unicorn_action = unicorn_actions[i]; 
    if(unicorn_action['type'] == 'movement'){ 
     $('#unicorn').animate({...}, unicorn_action['time']); 
    } 
    else if(unicorn_action['type']=='action'){ 
     $('#unicorn').animate({}, 0, function(){ 
       // I NEED TO APPEND THE ACTION TO THE ANIMATION 
       perform_action(unicorn_action); 
     }); 
    } 
} 

---

1er problème

var unicorn_name = "George"; 
$(...).animate({'top':100,'left':100 }, 100, function(){ 
    alert(unicorn_name); 
}) 

Ce retour unicorn_name non défini!

---

2ème problème

Si je dois ajouter un rappel à une file d'attente d'animation je pense faire ce qui suit

$(...).animate({'top':100,'left':100 }, 0, function(){ 
    // my actions 
}) 

Ce bousille les animations ..

---

Les gars idées? =)

Answer 1

est ici une version de votre code qui fixe tous les problèmes que vous posté:

var actions = [ 
    {action:'movement', top:123, left:123, time:1000}, 
    {action:'alert', content:'test'}, 
]; 

$(function(){ 
    $.each(actions, function(i, action) { 
     switch(action.action) { 
      case 'movement': 
       $('#unicorn').animate({top:action.top, left:action.left}, action.time); 
       break; 
      case 'alert': 
       $('#unicorn').delay(50).queue(function(){ alert(action.content); }); 
       break; 
     } 
    }); 
}); 

You can test it here, il y avait plusieurs corrections dans ces changements:

• Vous accédaient la variable d'un tableau, i changements au moment où vous l'avez utilisé ... vous devez passer dans une fermeture, ce qui crée $.each().
• Puisque vous n'avez pas besoin d'animer la même endroit encore, d'ajouter un rappel à la file d'attente il suffit d'utiliser .delay() pour l'ajouter votre fonction pause et 50ms .queue() (ou retirer le .delay() si vous venez de jouer avec il).
• Autres améliorations mineures:
  • Changé la structure if/else if à un switch, car il semble probable que vous allez ajouter plus de cas.
  • Changé tous vos ['prop']-.prop ... qui me est juste trouver plus facile à lire :)