I want to animate a <div>
from 200px
to auto
height. I can’t seem to make it work though. Does anyone know how?
Here’s the code:
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
I want to animate a <div>
from 200px
to auto
height. I can’t seem to make it work though. Does anyone know how?
Here’s the code:
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
Save the current height:
Temporarily switch the height to auto:
Get the auto height:
Switch back to
curHeight
and animate toautoHeight
:And together:
Try this one ,
Your selectors don't seem to match. Does your element have an ID of 'first', or is it the first element in every div?
A safer solution would be to use 'this':
Use slideDown and slideUp
IMO this is the cleanest and easiest solution:
Explanation: The DOM already knows from its initial rendering what size the expanded div will have when set to auto height. This property is stored in the DOM node as
scrollHeight
. We just have to fetch the DOM Element from the jQuery Element by callingget(0)
and then we can access the property.Adding a callback function to set the height to auto allows for greater responsiveness once the animation is complete (credit chris-williams):