Question

I’m working on some folding functions for a form similar to sublime text’s code folding. I want to be able to animate between 20px and the full height of a div. I tried doing el.animate({'height':'20px'}); and then el.slideUp();, but jQuery won’t slide the element if the height is already set.

Is there a simple way to do this with jQuery, and how does jQuery know what to animate the height to when you do .slideDown() ?

Answer 1

You can get the full height of an element with “display: block”;

So in case you have a hidden element, you can set it’s position to absolute, position it out of the screen and grab it’s dimensions like this:

$('#el').css('position', 'absolute').css('left', '99999px').css('display', 'block');
var h = $('#el').height();
$('#el').css('position', 'relative').css('display', 'none');

As for your issue, check that you are sliding once the animation is done.
Use:

el.animate({'height':'20px'}, delay, function() { slide here })