javascript - Long delay with jquery animation after scroll -

i have div width of 0px. after user scrolls x distance want animate div 140px.

when scroll point there long delay before see animation. further scroll longer delay. i'm setting containing div fixed @ same point. fixed item works fine animation delayed:

html:

<div class="menu-bar">     <div class="wrap">         <div id="menu-logo">             <img src="..." />         </div>         <nav id="site-navigation" role="navigation">...</nav>          <div class="right-menu">...</div>     </div> </div> 

js:

$(window).scroll(function(){     var barpos = $('#content').offset().top - $(document).scrolltop();     var menuheight = $('.menu-bar').height();     var topcolors = $('#top-colors').height();      if(barpos <= (topcolors+menuheight)) {         $('.menu-bar').css({'position':'fixed','bottom':'auto','top':'0px'});         $('#menu-logo').animate({'width':'140px'});     } else {         $('.menu-bar').css({'position':'absolute','bottom':'0px','top':'auto'});         $('#menu-logo').animate({'width':'0px'});     } }); 

the scroll event fired when document view or element has been scrolled.

this means, callback fire multiple times, every jquery.fn.animate add new animation in queue.

as quick'n'dirty fix, might try calling jquery.fn.clearqueue or jquery.fn.stop before every jquery.fn.animate call.