Анимируйте ширину элемента от 0 до 100%, при этом он и его оболочка будут иметь необходимую ширину, без предварительно у ⇐ Jquery

[Anonymous]

http://jsfiddle.net/nicktheandroid/tVHYg/

При наведении курсора на .wrapper его дочерний элемент .contents должен анимироваться от 0 пикселей до естественной ширины. Затем, когда мышь удаляется из .wrapper, она должна вернуться к размеру анимации 0 пикселей. Ширина элемента .wrapper должна быть настолько широкой, насколько это необходимо (позволяя .contents расти), поэтому .wrapper должен увеличиваться в ширину и уменьшаться по ширине, как .contents делает. Для .contents не должно быть заданной ширины. Я использую CSS3, но это можно сделать и с помощью jQuery, и это было бы нормально.

Проблема:
См. JSfiddle


[*]

Код: Выделить всё

.wrapper

не так широк, как нужно.
[*]когда .contents увеличивается, когда он достигает почти полной ширины, он переходит на следующую строку.
[*]При наведении курсора на .wrapper .contents исчезает, хотя его анимация должна уменьшаться до 0 пикселей
< /ол>

Код: Выделить всё

.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%;
}

Код: Выделить всё

+
These are the contents of this div

Подробнее здесь: https://stackoverflow.com/questions/786 ... ing-only-a