Добавление обратных вызовов в очередь анимации - jQuery

Question

Мне нужно синхронизировать функциональность с различными анимациями ... К сожалению, jQuery ставит в очередь ТОЛЬКО анимацию определенного объекта.

jQuery предлагает возможность добавлять обратные вызовы, но я не могу передать ему никаких внешних переменных.

---

Вот код! =)

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

---

первая проблема

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

Это возвращает unicorn_name неопределенными!

---

вторая проблема

Если мне нужно добавить обратный вызов в очередь анимации я думал сделать следующее

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

Это путает анимации .. .

---

Любые идеи парней? =)

Answer 1

Вот версия кода, который фиксирует все вопросы вы размещены:

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, там были несколько исправлений в этих изменениях:

• Вы имели доступ к переменной из массив, i изменений к тому времени, когда вы его использовали ... вам нужно передать его в закрытие, которое создает $.each().
• Поскольку вам не нужно, чтобы снова оживить в же место, чтобы добавить функцию обратного вызова в очередь просто использовать .delay() для 50мс паузы и .queue(), чтобы добавить функцию (или удалить .delay(), если вы просто играли с Это).
• Другие незначительные улучшения:
  • Изменен структуру if/else if к switch, так как она выглядит, скорее всего вы будете добавлять больше случаев.
  • Изменены все ваши ['prop'] к .prop ... это я просто найти его легче читать :)