Javascriptアニメーションをリセットせずに続ける

Question

私はこの機能をリセットせずに再現可能にしようとしています。 たとえば、この機能でボタンを押すと、ボタンが0pxから100pxの右に移動します。もう一度ボタンを押すと100pxから200pxになります。それもアニメーション化されるはずですので、ループが終了するまで一度に1px移動します。

以下のコードは、0pxから100pxに移動し、もう一度押すと0pxから100pxになるため、1回限りの使用としてのみ機能します。

私はこれを数時間にわたって作業しており、尋ねる前に多くのヘルプソースを調べました。

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を0に設定し、再びstartから開始します。

しかし、グローバル変数を使用すると、次の時間間隔のために保存されます。