JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

JavaScript

function slideDown($elem, totalIterations, easingName, cb){
    
              // jquery 로 생성된 element
              if (!$elem){
                  console.error('엘리먼트가 존재하지 않습니다');
                  return;
              }
    
              // 증감 단계(전체 height 사이즈를 총 몇 단계로 나눠 증감 시킬것인지 정할 수 있으며, 수치가 작을 수록 이동 속도가 올라간다.)
              totalIterations = totalIterations || 20;
    
              // callback function
              cb = cb || function(){};
    
              // $elem: jquery 로 생성된 element
              // elem: dom element
              var elem = $elem.get(0);
    
              // 만약 타이머가 존재할 경우, 해당 타이머를 clear 시킨다.
              if (elem.__timerId__){
                  window.clearInterval(elem.__timerId__);
                  elem.__timerId__ = null;
              }
    
              // (1)초당 함수가 호출되는 수(30 프레임으로 고정한다)
              var fps = 1000 / 30;
    
              // element 의 세로 사이즈
              var height = parseFloat($elem.height());
    
              var dummyHeight = 0;
    
              // element 의 초기(전체) 사이즈를 dummyHeight 속성에 할당한다.
              if (!elem.__dummyHeight__){
                  dummyHeight = elem.__dummyHeight__ = height;
    
                  $elem.height(0);
                  height = 0;
              }
              else{
                  dummyHeight = elem.__dummyHeight__;
              }
    
              // 증감 값
              var increaseValue = dummyHeight / totalIterations;
    
              var i = 0;
    
              elem.__timerId__ = window.setInterval(function () {
    
                  if (window[easingName] && window[easingName].constructor === Function){
                      // height 값을 증감 시킨다.
                      height = eval(easingName)(i, 0, dummyHeight, totalIterations);
                  }
                  else{
                      // height 값을 증감 시킨다.
                      height += increaseValue;
                  }
    
                  // height 값이 dummyHeight(전체 사이즈) 보다 크거나 같을경우...