Jquery .animate and using variable for value

JavaScript
1

So I’m wanting my element to start out as 50px in height and then on click go to height:“auto”. I’ve read that I can’t do the auto, so i’ve set a variable that gets the height of the element. BUT, i’m having issues getting the variable to work in the .animate() function.

Am I doing something wrong or can .animate not handle variables at all?


$('div.job_description').css("height","50px");

$("h3.job_title").toggle(function () {
     var box_height = $(this).next().height();
     $(this).next().animate({height:box_height},{queue:false,duration:500});
},
function () {
     $(this).next().animate({height:"50px"},{queue:false,duration:500});
});
2

It won’t work because the height is already set to 50 px. So when you measure the height again its still going to be 50px.

You could measure the height and save it before setting the height as 50px using the data method.



for (i=0; i<$('div.job_description').length; i++){
        $obj = $('div.job_description').eq(i);
        ht = $obj.height();
        $obj.data('ht', ht).height('50px');
}