#jquery #jquery-animate #offset
#jquery #jquery-анимировать #смещение
Вопрос:
я пытаюсь анимировать объект в несколько шагов по экрану, пока он не достигнет своей цели. однако смещение.значение слева динамически не изменяется (или я делаю это неправильно, что более вероятно).
вот что у меня есть
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:
Похоже, вы должны это делать:
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();
}
});
}
поместите вызов цикла в обратный вызов — должно помочь 🙂