Сделайте анимацию Javascript продолжением без перезагрузки

Question

Я пытаюсь восстановить эту функцию без перезагрузки. Например, когда я нажимаю кнопку с этой функцией, кнопка будет перемещаться вправо от 0px до 100px. Когда я снова нажимаю кнопку, она будет идти от 100 пикселей до 200 пикселей и так далее. Предполагается также оживить, поэтому он перемещается на 1px за раз, пока цикл не закончится.

Код ниже работает только как одноразовый режим, так как в нем он будет перемещаться от 0px до 100px, а при повторном нажатии его будет 0px до 100px.

Я работаю над этим несколько часов и просматривал много источников помощи, прежде чем спрашивать.

function goRight() { 
    var pos = 0; 
    var count = pos; 
    var elem = document.getElementById("main"); 
    var id = setInterval(move, 5); 
    function move() { 
      if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);} 
      else {pos++; elem.style.left = pos + 'px';} 
    } 
} 

Answer 1

function goRight() { 
    var elem = document.getElementById("main");     // the element 
    var origin = parseInt(elem.style.left) || 0;     // get the left of the element (as an origin for the animation), 0 if not set yet 
    var pos = 0;             // pos initialized to 0 

    var id = setInterval(move, 5); 
    function move() {           
     if(pos == 101) { clearInterval(id); }     // if pos is 101, then stop the animation 
     else { pos++; elem.style.left = (origin + pos) + 'px';} // if not, then increment it and set the left of the element to pos + origin 
    } 
} 

Answer 2

Я думаю, что вы должны сделать только позицию как глобальную переменную и инициировать его вне функции goRight

так:

var pos = 0; 
function goRight() { 
    var count = pos; 
    var elem = document.getElementById("main"); 
    var id = setInterval(move, 5); 
    function move() { 
     if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);} 
     else {pos++; elem.style.left = pos + 'px';} 
    } 
} 

Что плохого в вашем коде только каждый раз, когда вы вызываете goRight pos, будет установлен на ноль, и снова он начнется с начала.

но с глобальной переменной он будет сохранен для следующего временного интервала.