Javascript I'；我使用jQuery.scroll（）函数，为什么'；我用另一个函数覆盖它的效果吗？

我使用jQuery.scroll（）函数使某个元素的不透明度降低到0.2。由于没有本机的“scrollstop”指示器，我决定让元素在悬停时淡入1.0不透明度。但是，它不起作用

这是我的密码：

$(document).ready(function() {  
$(window).scroll(function() {
    $("#navlist").animate({ opacity: 0.2 }, 2000);
});

$("#navlist").hover(    
    function() {
        $(this).animate({ opacity: 1 }, 500);
    }, function() {
        $(this).animate({ opacity: 1 }, 500); // just to be safe?
    }
);
});

当我滚动时，#navlist元素会消失，但当你将鼠标悬停在它上面时，什么也不会发生。但是如果你在中途刷新页面，元素会在你刷新后自动淡出，在我滚动之前，如果你试图悬停使其淡出，什么也不会发生

---

有什么想法吗？

问题是滚动事件在一次滚动期间会被多次调用（每个鼠标滚轮滚动10-20次），因此

#navlist

会获得大量2秒的动画事件

我不太清楚jQuery到底发生了什么，但当您将其悬停时，即使运行了

opacity:1

动画，它们最终也会运行排队的

#navlist

动画

我用一种旗子解决了这个问题，我打赌你能找到更有效的方法

$(document).ready(function(){
   var isAnimationBusy = false;
   $(window).scroll(function(){
      if(isAnimationBusy) return;
      isAnimationBusy = true;
      $("#navlist").animate(
         { opacity: 0.2 }, 2000, 
         function(){ isAnimationBusy = false; }
      );
   });

   $("#navlist").hover(
      function(){
        isAnimationBusy = false;
         $(this).stop().animate({ opacity: 1 }, 500);
      },
      function(){
         isAnimationBusy = false;
         $(this).stop().animate({ opacity: 1 }, 500);
      }
   );
});

---

编辑：动画停止将解决问题，我仍然认为您应该控制调用动画事件的次数。可能会出现性能问题。

请先尝试停止动画

$(document).ready(function() {  
$(window).scroll(function() {
    $("#navlist").stop().animate({ opacity: 0.2 }, 2000);

});
$("#navlist").hover(function() {
    $("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
    $("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);

---

在.stop（）调用中，你们都是对的。我也使用了这个标志，因为我认为您不断调用scroll对性能的看法是正确的。谢谢