Javascript - Buggy slideToggle 효과 (jQuery 없음)

Question

jQuery를 사용하지 않고 기본 slideToggle 효과를 만들려고합니다. 현재 콘텐츠를 위아래로 슬라이드 할 수 있지만 너무 빠르게 클릭하면 콘텐츠가 계속 다운됩니다.

자바 스크립트 애니메이션을 처음 만들고 제작하는 것이므로 코드를 개선하기 위해 무엇을 할 수 있는지 알려 주시기 바랍니다.

또한 간격을 1로 설정했지만 애니메이션이 여전히 느립니다. 속도 향상에 대한 권장 사항은 무엇입니까? 어떤 도움을 크게 감상 할 수 http://jsfiddle.net/nfKTb/3/

function cL(element) { 
    console.log(element); 
} 

function setMinHeight(element) { 

    var yourTarget = document.querySelectorAll(element), 
     minHeight = 49; 

    for (var i = 0; i < yourTarget.length; i++) { 
     //cL(yourTarget[i].offsetHeight); 

     if (yourTarget[i].offsetHeight > minHeight) { 

      var targetExpanded = yourTarget[i]; 
      var realHeight = targetExpanded.offsetHeight; 

      yourTarget[i].style.height = minHeight + 'px'; // Sets minHeight for expaned ul when loaded 
     } 
    } 

    targetExpanded.addEventListener('click', function(e) { 

      e.preventDefault(); 
      var $this = this; 


      function slideDown() { 
       $this.style.height = minHeight + 'px'; 
       minHeight++; 

       if (minHeight >= realHeight) { 
        clearInterval(slideDownTimer); 
       } 
      } 

      function slideUp() { 
       $this.style.height = minHeight + 'px'; 
       minHeight--; 

       if (minHeight <= 49) { 
        clearInterval(slideUpTimer); 
       } 
      } 

      if (minHeight < realHeight) { 
       slideDownTimer = setInterval(slideDown, 1); 
      } else if (minHeight == realHeight) { 
       slideUpTimer = setInterval(slideUp, 1); 
      } 


     }); 

} 

setMinHeight('.dd'); 

:

내가 데모 용으로 만든 jsFiddle에서 참조하시기 바랍니다. 나는 지금 9 시간 동안 똑바로되었습니다. :)

Answer 1

증가량을 조절하려면 시간 간격을 줄이거 나 분수 증분을 사용하여 정수 값으로 변환하십시오.

여기

 var speed = 2.0; 
     targetExpanded.addEventListener('click', function(e) { 

       e.preventDefault(); 
       var $this = this; 


       function slideDown() { 
        $this.style.height = minHeight + 'px'; 
        minHeight+=speed; 

        if (minHeight >= realHeight) { 
         $this.style.height = realHeight + 'px'; 
         clearInterval(slideDownTimer); 
        } 
       } 

       function slideUp() { 
        $this.style.height = minHeight + 'px'; 
        minHeight-=speed; 

        if (minHeight <= 58.0) { 
         $this.style.height = 58.0 + 'px'; 
         clearInterval(slideUpTimer); 
        } 
       } 

       if (minHeight < realHeight) { 
        slideDownTimer = setInterval(slideDown, 1); 
       } else if (minHeight == realHeight) { 
        slideUpTimer = setInterval(slideUp, 1); 
       } 


      }); 

느리게 또는 빠르게 (1 예, 0.2의 느린 = 분수)와 함께 작동하도록 수정 fiddle DEMO

바이올린 단지 부동 사용 : 여기

는 코드의 코드 수정입니다 정수 대신 점을 사용하고 픽셀이 자동으로 int로 캐스팅되므로 픽셀을 나눌 수 없습니다.

매개 변수로 속도를 전달하면보다 안전합니다. 이것은 단지 그 아이디어의 시위 일뿐입니다.