анимация с помощью jquery - offset.left не обновляется - PullRequest
Новая
       29

анимация с помощью jquery - offset.left не обновляется

0 голосов
/ 31 мая 2011

Я пытаюсь анимировать объект в несколько шагов по экрану, пока он не достигнет своей цели. однако значение 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 действительно перемещается по экрану ...

спасибо!

1 Ответ

1 голос
/ 31 мая 2011

Похоже, вы должны делать это: 

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

положил вам цикл вызова в обратный вызов - должно помочь:)

...