JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

JavaScript

function slideDown($elem, step, cb){
        
              // jquery 로 생성된 element
              if (!$elem){
                  console.error('엘리먼트가 존재하지 않습니다');
                  return;
              }
        
              // 증감 총 단계(전체 height 사이즈를, 총 몇 단계로 나눠 증감 시킬것인지 정할 수 있으며, 수치가 작을 수록 이동 속도가 올라간다.)
              step = step || 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());
        
              // element 의 (초기)전체 사이즈
              var dummyHeight = 0;
        
              if (!elem.__dummyHeight__){
                  dummyHeight = elem.__dummyHeight__ = height;
        
                  $elem.height(0);
                  height = 0;
              }
              else{
                  dummyHeight = elem.__dummyHeight__;
              }
        
              // 증감 값
              var increaseValue = dummyHeight / step;
        
              elem.__timerId__ = window.setInterval(function () {
        
                  // height 값을 증감 시킨다.
                  height += increaseValue;
        
                  // height 값이 dummyHeight(전체 사이즈) 보다 크거나 같을경우, 해당 interval 을 중지시킨다.
                  if (height >= dummyHeight) {
        
                      // 타이머를 중지 시킨다.
                      if (elem.__timerId__){
                          window.clearInterval(elem.__timerId__);
                          elem.__timerId__ = null;
                      }
        
                      //...