代码之家 › 专栏 › 技术社区 › rhodesjason

我使用的是jQuery.scroll()函数,为什么不能用另一个函数覆盖它的效果呢?

scroll jquery javascript

0

rhodesjason · 技术社区 · 16 年前

这是我的密码:

$(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?
    }
);
});

有什么想法吗?

2 回复 | 直到 16 年前

1

0

guzart 16 年前

问题是,scroll事件在一个滚动过程中被多次调用(每个鼠标滚轮滚动10-20次),所以 #navlist 获取大量2秒的动画事件。

opacity: 1 动画运行时,它们最终运行排队的 #导航列表

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

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

2

1

Reigel Gallarde 16 年前

先尝试停止动画

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