與jQuery動畫 - offset.left不更新

Question

我試圖直到它到達其目標在動畫在屏幕上的幾個步驟的對象。然而，offset.left值不是動態變化（或者說我這樣做是錯誤的可能性較大）。

這裏就是我有

var initialOffset = $('#puzzle-transition-object').offset(); //thing to move 
var terminalOffset = $('#puzzle-container').offset(); //thing to touch 
var dtt = terminalOffset.left - initialOffset.left; //distance to travel 
var stepSegment = "+=" + Math.ceil(dtt/8) + "px"; //in left: css format 

function bringOutTheDiv(){ 
    var currentDivPosition = $('#puzzle-transition-object').offset(); 
    if(currentDivPosition.left < terminalOffset.left){ 
    console.log("current position"+currentDivPosition.left+": "+terminalOffset.left); 
    takeAStep(); 
    } 
} 

function takeAStep(){ 
    $('#puzzle-transition-object').animate({ 
     left: stepSegment, 
    }, { 
     duration: 50, 
     complete: function() { 
     //console.log("completed a step"); 
     } 
    }); 
    bringOutTheDiv(); 
} 

我確實有它在一個while循環，但爆發出來到另一個函數。基本上，currentDivPosition.left沒有更新，我得到一個堆棧溢出錯誤，但在div確實在屏幕上移動所有的方式...

的感謝！

Answer 1

看起來你應該這樣做：

var initialOffset = $('#puzzle-transition-object').offset(); //thing to move 
var terminalOffset = $('#puzzle-container').offset(); //thing to touch 
var dtt = terminalOffset.left - initialOffset.left; //distance to travel 
var stepSegment = "+=" + Math.ceil(dtt/8) + "px"; //in left: css format 

function bringOutTheDiv(){ 
    var currentDivPosition = $('#puzzle-transition-object').offset(); 
    if(currentDivPosition.left < terminalOffset.left){ 
    console.log("current position"+currentDivPosition.left+": "+terminalOffset.left); 
    takeAStep(); 
    } 
} 

function takeAStep(){ 
    $('#puzzle-transition-object').animate({ 
     left: stepSegment, 
    }, { 
     duration: 50, 
     complete: function() { 
     //console.log("completed a step"); 
     bringOutTheDiv(); 
     } 
    }); 
} 

把你電話環內的回電話 - 應該幫助:)