jQuery animation timeout

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