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