android.nick android.nick - 1 year ago 63
jQuery Question

Animate an element's width from 0 to 100%, with it and it's wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery

When hovering

, it's child element
should animate from
to it's natural width. Then when the mouse is removed from
, it should animate back down to
. The
element should only be as wide as it needs to be (allowing
to grow), so
should grow in width and shrink in width as
does. There should be no set width for
. I'm using CSS3, but it could be accomplished in jQuery, that would be fine.

The problem:
See the JSfiddle

  1. .wrapper
    is not only as wide as it needs to be.

  2. when
    grows, when it's almost at it's full width, it jumps down to the next line

  3. When hovering off of
    vanishes, when it should animate down to

.wrapper {
display: inline-block;

height: 20px;
width: auto;



.contents {




.wrapper:hover .contents {
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;


<div class="wrapper">
<div class="contents">These are the contents of this div</div>

Answer Source

I think I've got it.

Animating to 100% causes it to wrap because the box is bigger than the available width (100% minus the + and the whitespace following it).

Instead, you can animate an inner element, whose 100% is the total width of .contents.