jQuery smooth toggle css width between value and auto -

i looking smoothly toggle css width of div between value , auto. have this, second-best option know achieve want.

by doing hoping create click menu wide image , name.

$('#loginbutton').click(function(){     $(this).css('width', 'auto'),     $("#profile").delay(100).toggle(300); }); 

other toggle functions found wouldn't work "auto" value, find strange.

next toggle option div , it's contents "smoothly" widen, rather pop once clicked.

jsfiddle: http://jsfiddle.net/everybdylies/jaxpd/1/

thank you.

the crux of problem no 1 talks $.stop(true,false).animate({width: 'toggle'}); anymore (deprecated?).

also, display:inline-block useful when don't want take available space don't want element quite such pushover display:inline.

i changed little show how can done, there's still work needs done make text display properly.

http://jsfiddle.net/ctms3/2/

jquery (and other js lib animates) still superior because css3 transitions (animations) still don't account auto or collapse space used element when shrinking transform: scale (maybe there's way, don't know is).

i recommend directly manipulate animations first code above. if click button rapidly in fiddle, you'll notice #username changes directions on each click while #profile doesn't yet keeps going , forth. that's because of stop(true,false). interrupts animation while css set final state. convenient.

you're on great track. if want add more detail question or want figure out how make text in #username display properly, please ask in new 1 since 1 answered @ its' core.