使用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();
}

我确实在一段时间内循环了它，但把它分解成了另一个函数。基本上，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();
      }
    });
}

让您在内循环调用回调-应该会有所帮助：）