使用 jquery 制作动画 - offset.left 不更新答案

【问题标题】：animating with jquery - offset.left not updating使用 jquery 制作动画 - offset.left 不更新
【发布时间】：2011-05-31 16:51:03
【问题描述】：

我正在尝试在屏幕上分几步为对象设置动画，直到它到达目标。但是，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 确实在屏幕上一直移动......

谢谢！

【问题讨论】：

标签： jquery jquery-animate offset

【解决方案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();
      }
    });
}

让你循环调用 within 回调 - 应该有帮助:)

【讨论】：