jQuery滑塊 - 意外行爲

Question

我寫了一個小的'新聞速遞'。我應該通過spans進行循環，每5秒進行一次fadeIn/fadeOut。

雖然未觸及，但它運行良好，但是當您嘗試玩箭（例如向前跳5次）時，腳本會發瘋使fadeIn/fadeOut不動。

Live example here.

腳本：

 (function($) { 

     $.fn.NoticeBoard = function() { 


      // Set a timeout 
      var timeOut = setTimeout(nextNotice, 5000); 

      // pause on hover 
      $('.noticeboard').hover(

      function() { 
       clearTimeout(timeOut); 
      }, function() { 
       timeOut = setTimeout(nextNotice, 5000); 
      }); 

      // Next notice function called on timeout or click 

      function nextNotice(event) { 
       clearTimeout(timeOut); 
       timeOut = setTimeout(nextNotice, 5000); 

       if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) { 
        $('.noticeboard span:visible').fadeOut(300); 
        $('.noticeboard span:first-child').fadeIn(); 
       } 
       else { 
        $('.noticeboard span:visible').fadeOut(300).next().fadeIn(); 
       } 
       return false; 
      } 

      $('#notice-next').click(nextNotice); 
      $('#notice-prev').click(function(event) { 


       if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) { 
        $('.noticeboard span:visible').fadeOut(300); 
        $('.noticeboard span:last-child').fadeIn(); 
       } 
       else { 
        $('.noticeboard span:visible').fadeOut(300).prev().fadeIn(); 
       } 
       return false; 

      }); 

     }; 

    /*! 
    ---------------------------------------------*/ 

    })(jQuery); 

    /*! OnLoad 
    ---------------------------------------------*/ 
    $(document).ready(function() { 

     $('.noticeboard span').hide(); 
     $('.noticeboard span:first').show(); 
     $('.noticeboard').NoticeBoard(); 

    }); 

與固定大加讚賞問題的任何幫助。

Answer 1

I tried it here 我宣佈一個標誌，攜帶淡入已經完成與否，這樣我們就可以永遠不會觸發事件太多時間......

Answer 2

我編輯你的代碼。你可以看到它現場here。這完全是關於阻止標誌不允許你多次運行相同的代碼。我想，爲了更好的控制，我還包裝了setTimeout和clearTimeout的管理。