jQuery, 변수 값에서 div에 자동으로 애니메이션 높이 조절

Question

토글 애니메이션을 사용하여 div 값을 변수 값에서 auto로 애니메이션 싶습니다. 나는 내 변수를 제대로 부르지 않는다는 것을 안다. 그냥 어떻게하는지 보려고합니다.

var scheight = $('.searchcontainer').height(); 
$('.searchcontainer').toggle(
    function() { 
     $(".searchcontainer").animate({ height: scheight + "px" }, 500); 
    }, 
    function() { 
     $(".searchcontainer").animate({ height: auto}, 500); 
    } 
); 

Answer 1

당신이 "searchcontainer"요소에서 콘텐츠에 대한 또 다른 컨테이너를 배치하면 두 가지 애니메이션을 쉽게 될 것입니다. 이 방법을 사용하면 콘텐츠의 높이를 감지 할 수 있도록하고, (대신 '자동차'에 의존) 픽셀 값을 갖는 것은 당신에게 당신이 지금에 애니메이션을 적용 할 수있는 대상 제공합니다 :

http://jsfiddle.net/XdPry/3/

HTML :를

<div style="height:200px;border:1px solid #000000"> 
    <div class="searchcontainer" style="background-color:#aa22aa"> 
     <div>content</div> 
    </div> 
</div>​ 

JQuery와 : 대신`의

$('.searchcontainer:first').toggle(
    function() { 
     $(this).animate({ height: parseInt($(this).parent('div').height()) }, 500); 
    }, 
    function() { 
     $(this).animate({ height: parseInt($(this).children('div:first').height()) }, 500); 
    } 
);​