javascript - jQuery：有些东西正在延迟动画

Question

是什么导致动画延迟？网站上的所有 jQuery 都有某种延迟..

$(function(){
  $(window).scroll(function() {
       var elementTop = $('body').offset().top; 
       var position = elementTop+ $(window).scrollTop();
       if(position >= 20){
           $('#top').animate({top: '40px'}, 300);
       } else if(position < 20){
           $('#top').animate({top: '80px'}, 300);
       }
console.log(position);
  });   
});

直播： 链接在这里- 这是菜单/导航

Answer 1

每次滚动时都会触发您的代码。这些animate方法被连接起来，一个接一个地运行。要实现您想要的，您需要停止当前动画并开始一个新动画：

$(function(){
    $(window).scroll(function(){
        var elementTop = $('body').offset().top,
        position = elementTop+ $(window).scrollTop();

        if (position >= 20){
            $('#top').stop().animate({top: '40px'}, 300);
        }
        else if (position < 20) {
           $('#top').stop().animate({top: '80px'}, 300);
        }
    });   
});