height: auto; 애니메이션 주기

기존 height값에서 버튼 클릭시 자동으로 높이값을 주려고

height: auto;로 준 뒤 transition으로 애니메이션 효과를 주려고했는데

실행이 안되서 구글링을 하다가 발견한 스크립트이다.

 

html

<div class="tab-wrap">
    <a href="#" class="tab">tab_01</a>
    <div class="tab-contents">
        <p>내용</p>
    </div>
</div>

script

 $('.tab').on('click', function(){
    var el = $('.tab-contents'),
        curHeight = el.height(),  // 현재 정해져 있는 높이 값
        autoHeight = el.css('height', 'auto').height();  // 원래 가지고 있는 높이 값 
 
    if(조건){
        el.height(curHeight).animate({height: autoHeight}, 500);
    } else{
        el.animate({height: 0}, 500);
    }
});

 

 

 

출처: https://kcmschool.com/104 [web sprit]