当悬停.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>