CODEWITHSUNDEEP
jqueryjquery-animateoffset
panzhuli
panzhuli

Reputation: 2940

animating with jquery - offset.left not updating

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!

Upvotes: 0

Views: 1146

Answers (1)

Stuart Burrows
Stuart Burrows

Reputation: 10814

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 :)

Upvotes: 1

Related Questions