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); 
    } 
);​