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