javascript - 将回调添加到动画队列 - 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 undefined!

<小时/>

第二个问题

如果我需要将回调附加到动画队列，我正在考虑执行以下操作

$(...).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...我只是发现它更容易阅读:)​