http://jsfiddle.net/nicktheandroid/tVHYg/ http://jsfiddle.net/nicktheandroid/tVHYg/
悬停时.wrapper
,它是子元素.contents
应该从动画0px
到它的自然宽度。然后当鼠标从.wrapper
,它应该动画回到0px
. The .wrapper
元素的宽度应该只达到它需要的宽度(允许.contents
增长),所以.wrapper
宽度应增加并缩小为.contents
做。不应该设置宽度.contents
。我正在使用 CSS3,但它可以在 jQuery 中完成,那就没问题了。
问题:参见 JSfiddle
-
.wrapper
不只是需要的那么宽。
- when
.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>
我想我已经明白了。
.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>
动画至100%
导致它换行,因为盒子大于可用宽度(100% 减去+
及其后面的空格)。
相反,您可以为内部元素设置动画,其100%
是总宽度.contents
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)