Блог

я пытаюсь анимировать объект в несколько шагов по экрану, пока он не достигнет своей цели. однако смещение.значение слева динамически не изменяется (или я делаю это неправильно, что более вероятно).

вот что у меня есть

 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 перемещается по всему экрану…

Спасибо!

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

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

поместите вызов цикла в обратный вызов — должно помочь 🙂