1

我输入了一些代码来淡入和淡出一些 div，包括导航器。

我注意到一个错误，当您快速单击导航器并尝试通过发送垃圾邮件按钮非常快速地在 div 之间进行更改时，div 将被窃听，如果您检查代码，您会看到 div 逐渐淡入 0.5不透明度，有时甚至是 0.12，然后淡出到 0.0 到 0.09 或类似的东西。

这是我的代码：

$(document).ready(function(){

    var currentDiv = $("#fading_divs div:first");
        currentDiv.css("display","block");
    var divN = $("#fading_divs div").length;
    var fadeInterval;


    for(i=0; i<divN; i++){   
      $('<span />').text(i+1).appendTo('#fade_nav');   
    }

    $('#fade_nav span').eq(0).addClass('active');


    $('#fade_nav span').click(function(){ 
        clearInterval(fadeInterval);
        $('#fade_nav span').removeClass('active').eq( $(this).index() ).addClass('active');    

        currentDiv.fadeOut({duration:1000,queue:false});
        currentDiv = $("#fading_divs div").eq( $(this).index() );
        currentDiv.fadeIn({duration:1000,queue:false});

        anim();


    });

    function anim() {
        fadeInterval = setInterval(function(){
            currentDiv.fadeOut({duration:1000,queue:false});

            if(currentDiv.next().length)
                currentDiv = currentDiv.next(); 

            else
                currentDiv = currentDiv.siblings().first();

            $('#fade_nav span').removeClass('active').eq( currentDiv.index() ).addClass('active');
            currentDiv.fadeIn({duration:1000,queue:false});
        }, 4000);
    }

    anim();

});

这是一个小提琴：http: //jsfiddle.net/b5PfE/

尝试向导航按钮发送垃圾邮件，直到您看到 div 几乎没有淡入或淡出。

关于如何修复它的任何建议？

4

1 回答 1

0

这就是我通常解决此类问题的方式：

  1. 将一个类添加到“激活”的#fade_nav 跨度
  2. 使用 $('.activated').live('click', function (event) { // }); 开始你的功能
  3. 在该函数中，首先从#fade_nav 中删除激活的类。这将防止按钮在动画期间被点击。
  4. 在函数的最后，重新添加 .activated 类，以便再次单击按钮。
于 2013-10-15T17:45:52.223 回答