You have an element that you want to expand from
height: 0 to whatever its natural height is. You'd prefer to use CSS, but everyone knows that you can't transition to
height: auto;, so you resort to using
.slideDown(). This is fine, but now you have to co-ordinate your CSS with your JS to make sure everything is timed correctly between the two and that they happen on the same call every time you make a class change and...
You have a list of
inline-block elements that you'd like to grow horizontally with a nice, smooth transition. You could do this if you set the
width property, but you don't want them all to be the same size. Sure, you could write some JS to create a clone element, measure the width, and set the style attribute but... no.
It's a pain.
Instead of doing all this, you can "abuse" the
max-width properties. They are threshold properties, meaning that they will allow the element to go up to a certain value, but no further. They are also animatable. So, if you set the
max- property to something you know the box won't grow larger than, you can animate it!
Here's a demo showing both a
When you set a
max- property, at least as of this writing, the animation takes place as though the element was that size to start, meaning a potential delay of the animation. Therefore it is recommended that if you have a contracting animation (ie, you want the element to hide again), you size your
max- property as close to the actual size you want as possible. This is demonstrated in the fiddle link above with the two red boxes. Notice how the small red box doesn't actually start shrinking until the large red box is at the same place.