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

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

  •  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);
    }
    );
    
    推荐文章