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);
  });   
});

直播: Link here - 这是菜单/导航

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);
        }
    });   
});