I have an empty div with min-height defined in the CSS. When I use jQuery's slideDown() on it, it doesn't work - the div just instantly appears. Here is the workaround:
var myMinHeight = myElement.css("minHeight"); myElement.css({minHeight: 0}).animate({height: myMinHeight}, "fast", function() { $(this).css({minHeight: "", height: ""}); });
First we grab the CSS min-height value. Then we overide it, setting it to 0, and animate our div to the given min-height. At this point, we have what we want, but our CSS is messed up (e.g. say our CSS min-height was originally 120px, now our div will have a fixed height of 120px). This means if we add more content to the div, it cannot grow like we want it to (the very reason we were using min-height in the first place). The solution is simply to reset jQuery's inline style values (see line 3), after which it seamlessly reverts to your original CSS values.
REFERENCES
http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
http://jsfiddle.net/jitter/mLHb9/1/
Thanks was wounding why this was hapening
ReplyDelete