当用户向上和向下滚动太快时,Jquery动画会挂起

时间:2015-01-09 22:20:20

标签: jquery

所以我有这个代码使得div框更短或更长,具体取决于滚动位置。问题是,如果用户向下滚动然后快速向上滚动,它会缩短,然后挂起大约一秒钟才会再次使div更长。 这是为什么?

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 60) {
        $("ul.undermenu").animate({width:'100px'}, 500);;
     }
     else {
         $("ul.undermenu").animate({width:'1000px'}, 500);
     }
});

1 个答案:

答案 0 :(得分:2)

滚动时,您正以快速执行此事件。因此,您应该使用.stop(true, false)

清除动画队列
var win = $(window),
    menu = $("ul.undermenu"),
    css = { width: 1000 };        

win.bind('scroll', function() {
    css.width = win.scrollTop() > 60 ? 100 : 1000;
    menu.stop(true, false).animate(css, 500);
});

stop函数将2个布尔值作为参数:

  • 清除动画队列
  • 跳转到动画结束

让您决定哪种组合足够顺畅。

<强> DEMO

<强> jQuery stop