Question

I have an animation script implemented with jQuery. The issue is that it does not complete the animation before returning to the parent function. To clarify: the js changes a background color, the js function calls the animate function, the animation function begins, before it finishes it has already returned to the parent and continues on with the next line of 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);
}

I need for the code to wait for the animation to complete and then proceed. Any suggestions?

Answer 1

You should pass it in as a callback function to the animate method:

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