2013-10-15 4 views
1

Я набрал некоторый код, чтобы затухать и выходить из некоторых div, включая навигатор.jQuery FadeIn, FameOut spamming bug

Я заметил ошибку, когда вы быстро нажимаете навигатор и стараетесь очень быстро переключаться между divs, рассылая кнопки, div будет прослушиваться, и если вы проверите код, вы увидите, что divs затухают до 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/

пытается спамить кнопки нав, пока вы не увидите, что дивы едва выцветание или наружу.

Любое предложение о том, как его исправить?

ответ

0

Это, как я обычно решаю такие вопросы, как: что ('активированная ')

  1. добавить класс в #fade_nav пролет "активированы"
  2. Используйте $ жить (' нажмите'. function (event) {//}); для запуска вашей функции
  3. Внутри этой функции сначала удалите активированный класс из #fade_nav. Это предотвратит возможность нажатия кнопок во время анимации.
  4. В конце функции добавьте повторно активированный класс, чтобы кнопки снова можно было щелкнуть.
+0

Если возможно, предоставьте мне jsfiddle, я немного вас потерял:/BTW '.live()' устарел и удален с версии 1.9 – kfirba

+1

Использовать 'live'? 'live' [мертв] (http://api.jquery.com/live/), человек. – MikeSmithDev

+0

Извините, у меня нет времени на данный момент. Я думаю, что ваша проблема заключается в том, что вы начинаете новую анимацию до того, как старая кончилась. Поэтому, если вы можете отключить свои кнопки во время анимации, вы можете избежать проблемы. – kthornbloom