[jQuery] animate() 로 height auto 토글효과 버튼 만들기.

제이쿼리의 animate 메서드로 접혓다 펼쳐지는 토글 형식의 animation 을 만들려면 

height 의 값을 알고 그것에 대한 값을 animate 메서드에 전달 해줘야 작동할 수 있습니다.

기존의 toggle 메서드를 이용하여 toggle 메뉴를 만들 수 있지만 ,

toggle 메서드는 style 값으로 width 값까지 제어하는 현상이 일어나면서 이상하게 접혓다 펼쳐짐을 확인하였습니다.

그래서 알아본 결과 animate 메서드로 height 를 이용하기로 하였는데 height 값으로 auto를 주면 접혓다 펼처지나 animation 효과는 나타나지 않습니다.

 효과를 나타내려면 height 값을 auto로 주지말고 초기값을 전달해 줘야 합니다. (0px 이면 0px이라는 것을 전달.)

다음과 같은 트릭을 이용하여 toggle형식의 에니메이션 탭을 만들 수 있었습니다.

아래 내용을 확인 바랍니다.

HTML

 
<div class="toggle-tab-wrap">
    <a href="#" class="tab">토글 teb_01</a>
    <div class="tab-contents">
        <div class="tab-in-pd">
            누가 가장 행복한 사람인가? <br>
            남의 장점을 존중해 주고 남의 기쁨을 <br>
            자기의 것인양 기뻐하는 자이다.
        </div>
    </div>
</div>
 

CSS

.toggle-tab-wrap {
    padding: 100px;
}
.toggle-tab-wrap .tab {
    display: block;
    height: 15px;
    border: 1px solid #b6b6b6;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    color: #000;
    font-weight: bold;
    background: #ebebeb;
}
.toggle-tab-wrap .tab-contents {
    height: 0px;
    border: 1px solid #97daeb;
    background: #d4f6ff;
    overflow: hidden;
}
.toggle-tab-wrap .tab-contents .tab-in-pd {
    padding: 10px;
}
 

JavaScript

 
$('.tab').on('click', function(){
 
    var open = $(this).next('.tab-contents').height();
    var el = $('.tab-contents'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
 
    if( open === 0 ){
        el.height(curHeight).animate({height: autoHeight}, 500);
    }else{
        el.animate({height: 0}, 500);
    }
 
 
});