將回調添加到動畫隊列 - jQuery

我需要與各種動畫同步功能......不幸的是，jQuery只排隊某個對象的動畫。將回調添加到動畫隊列 - 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); 
     }); 
    } 
}

1日問題

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

這打亂了動畫.. 。

任何想法傢伙？ =）

來源

2010-07-25 RadiantHex

我真的不明白你正在嘗試做的...但你第一個問題不應該提醒undefined ...還有沒有提到的其他東西？ – Reigel 2010-07-25 02:39:08

@Reigel：我需要訪問函數 – RadiantHex 2010-07-25 02:44:04

內的值才能顯示更多代碼？你可以嘗試粘貼它在這裏http://jsfiddle.net/如果它是那麼長...簡單的例子，警報工程http://jsfiddle.net/vgQqd/ – Reigel 2010-07-25 02:45:26

這是你的代碼的版本，修復了所有您發佈的問題：

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()爲50ms的暫停和.queue()加入你的函數（或刪除.delay()如果你只是擺弄它）。
其他小的改進：
- 改變了你的if/else if結構爲switch，因爲它看起來可能你會添加更多的情況。
- 改變了所有的['prop']至.prop的...這是我剛發現它更容易閱讀:)

來源

2010-07-25 10:25:49

將回調添加到動畫隊列 - jQuery

回答

相關問題