当用户上下滚动太快时，jQuery动画会挂起 [英] Jquery animation hangs when user scrolls up and down too fast

问题描述

所以我有这段代码可以使div框变短或变长，具体取决于滚动位置.关键是，如果用户向下滚动然后真正快速向上滚动，则会使其变短，然后挂起大约一秒钟，然后再次使div变长. 为什么会这样?

So I have this code that makes a div box shorter or longer, depending on the scroll position. The thing is, if the user scrolls down then scrolls up really quickly, it makes it shorter, then hangs for about a second before it makes the div longer again. Why is this?

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

推荐答案

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

You are executing this event at rapid speeds when you scroll. Hence you should clear the animation queue with .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个布尔值作为参数:

The stop function takes 2 booleans as parameters:

• 清除动画队列
• 跳到动画结尾

让您决定哪种组合足够平滑.

For you to decide which combination works smooth enough.

演示

DEMO

jQuery停止

jQuery stop

这篇关于当用户上下滚动太快时，jQuery动画会挂起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！