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

发布于 2024-11-11 01:10:48 字数 1025 浏览 3 评论 0原文

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

谢谢！

原文

i'm trying to animate an object in several steps across the screen until it gets to its target. however, the offset.left value isn't dynamically changing (or i'm doing it wrong, more likely).

here's what I have

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

I did have it in a while loop, but broke it out into another function. Basically, currentDivPosition.left isn't updating and i'm getting a stack overflow error, although the div does move all the way across the screen...

thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三寸金莲 2024-11-18 01:10:48

看起来你应该这样做：

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

将你的循环调用放在回调中 - 应该有帮助:)

Looks like you should be doing this:

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

put you loop call within the call back - should help :)

回复收藏 0 原文

~没有更多了~