滚动上的jquery生涩动画

Question

我试图在页面缩放时实现一个简单的徽标面板动画，当滚动经过某个点时向上滚动，如果滚动向上。我用jquery的.animate()函数来改变一些CSS参数。我还使用.stop()函数来中断滚动侦听器，以便整个动画无延迟地工作。

它几乎在那里，但我注意到在动画过程中发生了一些不平衡的滞后。例如，当我向下滚动时，它向下缩放，但不是全部，只是略微且在一秒之内跳到完全缩小的位置。滚动时也会发生同样的情况 - 缩小一半或甚至稍微暂停几次，然后再缩小。你认为可能导致什么？

这里是我的代码：

(function($) { 
    $(document).ready(function() { 
     var animScroll; 
     $(window).scroll(function() { 

      if ($(this).scrollTop() > 700) { 
       animScroll = true; 
       $('#menu').stop().animate({height: '50px'}, { 
        queue: false, 
        duration: 400 
       }); 

       $('#toplogo').stop().animate({width: '150px'}, { 
        queue: false, 
        duration: 400 
       }); 

      } else if ($(this).scrollTop() < 700) { 
       $('#menu').stop().animate({height: '85px'}, { 
        queue: false, 
        duration: 400 
       }); 

       $('#toplogo').stop().animate({width: '300px'}, { 
        queue: false, 
        duration: 400 
       }); 
      } 
     }); 
    }); 
})(jQuery); 

Answer 1

jQuery是不是最快的，当涉及到动画。下面我使用CSS。请注意我将翻转点改为300像素。

(function($) { 
 

 

 
    $(document).ready(function() { 
 
    var animScroll; 
 
    $(window).scroll(function() { 
 

 
     if ($(this).scrollTop() > 300) { 
 

 
     $('#toplogo').addClass("smaller"); 
 

 

 
     } else if ($(this).scrollTop() < 300) { 
 

 
     $('#toplogo').removeClass("smaller"); 
 

 
     } 
 
    }); 
 
    }); 
 
})(jQuery);

.container { 
 
    height: 1000px; 
 
} 
 

 
#menu { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
#toplogo { 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
#toplogo.smaller { 
 
    transform: scale(0.5, 0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="menu"> 
 
    <img id="toplogo" src="http://placehold.it/200"> 
 
    </div> 
 
</div>