jquery set div width to other div's width after animation -

i'm animating div wider, after animation want set width of following list exact same of newly animated div, , move under it.

oddly, when resizing, resizes small width, once clicked again wanted size millisecond. might not unclear.

$('#loginbutton').click(function(){   $('.username').stop(true,false).animate({width:'toggle'});   $("#profilesettings").delay(220).toggle(300);   $("#profilesettings").width( $("#loginbutton").outerwidth(true) ); }); 

here's fiddle

so, i'd list appears width of entire image + name bar , i'd move under it.

thanks!

you can use anonymous callback function along animate call, menu appears once clicked element has finished expanding. way accurate width. can make display underneath setting clear:both;.

the resulting code looks like...

$('#loginbutton').click(function(){     //$('.username').stop(true,false).animate({width:'toggle'});     $('.username').animate({             width : 'toggle'     }, 1000, 'swing',function(){         var newwidth = ($('.username').width());         $("#profilesettings").width(newwidth).css({             clear:'both',             'margin-top':0         });                 $("#profilesettings").toggle(300);     });//end anonymous funciton             });//end click funciton 

i specified 1 second delay, , added 'swing' easing well. these optional , use original animate code if prefer.

here updated fiddle http://jsfiddle.net/ctms3/7/

an alternative approach animate parent container, both button , list expand @ same time..

hope info helps.