讓Javascript動畫繼續而不重置

Question

我試圖讓此功能無需重置即可重複使用。 例如，當我按下帶有此功能的按鈕時，按鈕將從0px移動到右側100px。當我再次按下按鈕時，它將從100px變爲200px，依此類推。它應該動畫，所以它一次移動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

我想你只能做POS機作爲一個全局變量，並啓動它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將被設置爲零，並且它將從頭開始。

但有一個全局變量它將被保存下一個時間間隔將運行。