0

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

アニメーションが完了するのを待ってから続行するコードが必要です。助言がありますか？

4

1 に答える 1

0

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);
}
于 2012-07-17T19:08:58.640 に答える