점진적 증가/감소 javascript 2 요소

Question

점차적으로 간격을 사용하여 자바 스크립트에서 2 ID의 요소를 늘리려고합니다. 요소에 두 개의 id를 전달하고 있습니다. 조건에 따라 위치의 방향에 따라 점차 요소의 너비가 증가하도록 조건문을 작성하려고합니다.

전달 된 요소 위치가 oldPosition보다 작 으면 왼쪽 요소를 줄이고 오른쪽 요소를 점차 늘리 길 원합니다. 전달 된 요소 위치가 oldPosition보다 큰 경우 반대입니다.

참고이 :) 고정 나의 오래된 문제의 확장 (Javascript gradual width increase)

는 Heres는이

function grow(elementL, elementR, elementText, position) 
{  
    window.loopTimer = setInterval(function() { 
     growInner(elementL, elementR, position); 
     /* fadeOut(elementText); */ 
    }, 25); 
} 

var oldPosition = 0; 
function growInner(elementL, elementR, position) 
{  
    var htL = parseInt(document.getElementById(elementL).style.width,10); 
    var htR = parseInt(document.getElementById(elementR).style.width,10); 
    var movementL =0; 
    var movementR =0; 
    if(position < oldPosition) 
    { 
     movementL = htL + 10; 
     movementR = htR - 10; 
    } 
    if(position > oldPosition) 
    { 
     movementL = htL - 10; 
     movementR = htR + 10; 
    } 

    if(position == 1 && htL < 600 || rtL > 250){ 
     document.getElementById(elementL).style.width = movementL + 'px'; 
     document.getElementById(elementR).style.width = movementR + 'px'; 
     oldPosition = position; 
    } 
    else if(position == 2 && htL < 550 || rtL > 300){ 
     document.getElementById(elementL).style.width = movementL + 'px'; 
     document.getElementById(elementR).style.width = movementR + 'px'; 
     oldPosition = position; 
    } 
    else if(position == 3 && htL < 300 || rtL > 550){ 
     document.getElementById(elementL).style.width = movementL + 'px'; 
     document.getElementById(elementR).style.width = movementR + 'px'; 
     oldPosition = position; 
    } 
    else if(position == 4 && htL < 250 || rtL > 600){ 
     document.getElementById(elementL).style.width = movementL + 'px'; 
     document.getElementById(elementR).style.width = movementR + 'px'; 
     oldPosition = position; 
    } 
    else{ 
     clearInterval(loopTimer); 
     return false; 
    } 
} 

Answer 1

내 앞의 코드 위치 조건문 올바르게 계정 폭으로 무엇 필자을 복용하지 않은있어 클릭 한 위치와 관련하여 documnentGet 변수를 줄이고 부울 반환과 보안을 추가하여 이전 타이머가 멈출 때까지 다른 타이머를 시작할 수 없었습니다.

jsFiddle 링크가 있지만 작동하지 않는 것 같습니다.

http://jsfiddle.net/2mRsG/3/

function moveStart(elementL, elementR, position) 
{ 
    var moveTimer = setInterval(function() { 
     if (!movingProcess(elementL, elementR, position)) { 
      clearInterval(moveTimer); 
     } 
    }, 20); 
} 

var oldPos = 1; 
    function movingProcess(elementL, elementR, position) { 
     moving = true; 
     var htL = parseInt(document.getElementById(elementL).style.width,10); 
     var htR = parseInt(document.getElementById(elementR).style.width,10); 
     var left = document.getElementById(elementL); 
     var right = document.getElementById(elementR); 
     if(position==1){   
      var movementL = htL + 5; 
      var movementR = htR - 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementL >= 600 && position==1) 
      { 
       oldPos = 1; 
       moving = false; 
       return false; 
      } 
     } 
     else if(position==2 && oldPos > 2){ 
      var movementL = htL + 5; 
      var movementR = htR - 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementL >= 500) 
      { 
       oldPos = 2; 
       moving = false; 
       return false; 
      } 
     } 
     else if(position==2 && oldPos == 1){   
      var movementL = htL - 5; 
      var movementR = htR + 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementR >= 300) 
      { 
       oldPos = 2; 
       moving = false; 
       return false; 
      } 
     } 
     else if(position==3 && oldPos < 3){ 
      var movementL = htL - 5; 
      var movementR = htR + 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementR >= 500) 
      { 
       oldPos = 3; 
       moving = false; 
       return false; 
      } 
     } 
     else if(position==3 && oldPos ==4){ 
      var movementL = htL + 5; 
      var movementR = htR - 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementL >= 300) 
      { 
       oldPos = 3; 
       moving = false; 
       return false; 
      } 
     } 
     else if(position==4){ 
      var movementL = htL - 5; 
      var movementR = htR + 5; 
      left.style.width = movementL + 'px'; 
      right.style.width = movementR + 'px'; 
      if (movementR >= 600) 
      { 
       oldPos = 4; 
       moving = false; 
       return false; 
      }  
     } 
     return true; 
    }