Анимируйте ширину элемента от 0 до 100%, при этом он и его обертка будут только настолько широкими, насколько это необходимо, без заданной ширины, в CSS3 или jQuery

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

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

Проблема:.

1. .wrapper не только не такой широкий, как нужно, см. JSfiddle.
2. когда .contents увеличивается, когда он почти на всю ширину, он прыгает вниз к следующей строке
3. При наведении на .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