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>