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
.wrapper
is not only as wide as it needs to be..contents
grows, when it's almost at it's full width, it jumps down to the next line.wrapper
, .contents
vanishes, when it should animate down to 0px
I think I've got it.
.wrapper {
background:#DDD;
display:inline-block;
padding: 10px;
height: 20px;
width:auto;
}
.label {
display: inline-block;
width: 1em;
}
.contents, .contents .inner {
display:inline-block;
}
.contents {
white-space:nowrap;
margin-left: -1em;
padding-left: 1em;
}
.contents .inner {
background:#c3c;
width:0%;
overflow:hidden;
-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;
}
.wrapper:hover .contents .inner {
width:100%;
}
<div class="wrapper">
<span class="label">+</span><div class="contents">
<div class="inner">
These are the contents of this div
</div>
</div>
</div>
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
.