jQuery动画速度问题

Question

I have a div which I want to show on scroll and hide when user scroll back, its working but not as expected. The problem is when I scroll down then it appears fine, but when I scroll back there is a delay in hide.

What I want is show div with slide from top to bottom, and when hiding bottom to top effect.

Here is the code I have been trying:

 $(window).scroll(function() { var fheader = $(".top-header"); if ($(this).scrollTop()>50) { $(fheader).animate({top: "0px"},{duration: 100, easing: "linear"}); } else { $(fheader).animate({top: "-50px"},{duration: 100, easing: "linear"}); } }); 

 .top-header { width: 100%; position: fixed; height: 50px; background: #fff; border-bottom: 2px solid #ccc; top: -50px; left: 0; } .content { width: 100%; height: 1400px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="top-header"> header </div> <div class="content"> this is content </div> 

Answer 1

Just add stop() before animate to prevent queue exécution :

Here is a working example :

 $(window).scroll(function() { var fheader = $(".top-header"); if ($(this).scrollTop()>50) { $(fheader).stop().animate({top: "0px"},{duration: 100, easing: "linear"}); } else { $(fheader).stop().animate({top: "-50px"},{duration: 100, easing: "linear"}); } }); 

 .top-header { width: 100%; position: fixed; height: 50px; background: #fff; border-bottom: 2px solid #ccc; top: -50px; left: 0; } .content { width: 100%; height: 1400px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="top-header"> header </div> <div class="content"> this is content </div>