http://jsfiddle.net/nicktheandroid/tVHYg/
当悬停.wrapper，它的子元素.contents应该动画从0px到它的自然宽度。然后当鼠标从.wrapper中删除，它应该动画回到0px。 .wrapper元素应该只有它需要的宽度(允许.contents增长)，所以.wrapper应该增加宽度和宽度收缩为.contents。 .contents不应设置宽度。我使用CSS3，但它可以在jQuery完成，这将是好的。
问题：
见JSfiddle
> .wrapper不仅要满足需要。
>当.contents增长时，当它几乎是它的全宽，它跳到下一行
>当悬停.wrapper时，.contents消失，当它应该动画到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>
解决方法
我想我已经有了。
http://jsfiddle.net/tVHYg/4/
动画到100％会导致它包装，因为框大于可用宽度(100％减去后面的空格和空格)。
相反，您可以为内部元素设置动画，其中100％是.contents的总宽度。
