android.nick android.nick - 6 months ago 33
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

http://jsfiddle.net/nicktheandroid/tVHYg/

When hovering

.wrapper
, it's child element
.contents
should animate from
0px
to it's natural width. Then when the mouse is removed from
.wrapper
, it should animate back down to
0px
. The
.wrapper
element should only be as wide as it needs to be (allowing
.contents
to grow), so
.wrapper
should grow in width and shrink in width as
.contents
does. There should be no set width for
.contents
. 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
    .contents
    grows, when it's almost at it's full width, it jumps down to the next line

  3. When hovering off of
    .wrapper
    ,
    .contents
    vanishes, when it should animate down to
    0px





.wrapper {
display: inline-block;

height: 20px;
width: auto;

padding:10px;

background:#DDD;
}

.contents {
display:inline-block;

width:0%;

white-space:nowrap;
overflow:hidden;

background:#c3c;
}

.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;

width:100%;
}

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




Answer

I think I've got it. http://jsfiddle.net/tVHYg/4/

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.