jQuery動畫超時

Question

我有一個用jQuery實現的動畫腳本。問題是它在返回父函數之前沒有完成動畫。爲了澄清：js改變背景顏色，js函數調用animate函數，動畫函數開始，在它完成之前它已經返回到父項並繼續下一行js。

function step5(){ 
/*code*/  
currentNode.obj.style.backgroundColor="white"; 
movePacket(currentNode, objects[currentNode.switchName]); 
objects[currentNode.switchName].obj.style.backgroundColor="#ADEBFF";  
    /*code*/  
} 

function movePacket(obj1, obj2){ 
var x = obj2.x - obj1.x; 
var y = obj2.y - obj1.y; 
$("#packet").animate({"left": "+="+x+"px", "top": "+="+y+"px"}, 3000); 
} 

我需要代碼等待動畫完成，然後繼續。有什麼建議麼？

Answer 1

你應該把它作爲一個回調函數到animate方法：

function step5() { 
    currentNode.obj.style.backgroundColor = "white"; 

    movePacket(currentNode, objects[currentNode.switchName], function() { 
     objects[currentNode.switchName].obj.style.backgroundColor = "#ADEBFF"; 
    }); 
} 

function movePacket(obj1, obj2, callback) { 
    var x = obj2.x - obj1.x; 
    var y = obj2.y - obj1.y; 

    $("#packet").animate({ 
     left: "+=" + x + "px", 
     top: "+=" + y + "px" 
    }, 3000, callback); 
}