자바 스크립트 애니메이션을 재설정하지 않고 계속하십시오.

Question

이 기능을 재설정하지 않고 반복 할 수 있도록 노력하고 있습니다. 예를 들어,이 기능으로 버튼을 누르면 버튼이 0px에서 100px로 오른쪽으로 이동합니다. 버튼을 다시 누르면 100px에서 200px로 이동합니다. 그것은 애니메이션이기도합니다. 그래서 루프가 끝날 때까지 한 번에 1px 씩 움직입니다.

아래 코드는 0px에서 100px로 이동하고 다시 누르면 0px에서 100px로 이동하기 때문에 한 번만 사용할 수 있습니다.

나는 몇 시간 동안이 작업을 해왔으며, 묻기 전에 많은 도움을 얻었습니다.

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';} 
    } 
} 

무엇이 잘못된 코드에서이 매 시간 :

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 기능이 같은

외부로 시작해야합니다 생각 당신은 goRight를 0으로 설정하고 다시 처음부터 시작하도록 pos를 호출합니다.

하지만 전역 변수를 사용하면 다음 시간 간격으로 저장됩니다.