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', 関数 (イベント) { // }); を使用します。あなたの機能を開始するには
  3. その関数内で、最初にアクティブ化されたクラスを #fade_nav から削除します。これにより、アニメーション中にボタンをクリックできなくなります。
  4. 関数の最後に .activated クラスを再度追加して、ボタンをもう一度クリックできるようにします。
于 2013-10-15T17:45:52.223 に答える