jQuery面板自動面板交換

Question

我正在構建一個功能，根據點擊的導航項來交換內容面板。

代碼

$('.p-nav-nav').on('click', function(e){ 
    var $this = $(this); 
    var $which = $this.attr('data-rel'); 
    var $panel = $('.' + $which); 
    $('.p-nav-nav').removeClass('active'); 
    $this.addClass('active'); 
    $('.panel-1, .panel-2, .panel-3').fadeOut('fast', 'easeInOutQuad', function(){ 
     setTimeout(function(){ 
      $panel.fadeIn('fast', 'easeInOutQuad'); 
     }, 100); 
    }); 
}); 

我怎樣才能得到這個自動的運行，比如開關面板的每一秒X＃？我正在使用jQuery 1.7（因爲這是我的工作，並沒有我不能升級它）

Answer 1

我會從我的事件和時序邏輯中分離出我的動畫邏輯。這使事情變得更簡單的，你可以隨時激活動畫邏輯，而不必依賴於click事件，所以像這樣：

var animatePanel = function(panelName,nextPanel){ 
    // animation logic here 
}; 

$('.p-nav-nav').on('click', function(e) { 
    var $this = $(this); 
    var $which = $this.attr('data-rel'); 
    var $panel = $('.' + $which); 
    animatePanel($this,$panel); 
}; 

var looper = window.setTimeout(function(){ 
    // logic to get the current panel, and set the next panel, called via animatePanel() 
},1000); 

通過這種方式，您可以點擊激活一個動畫，同時也有一個自動動畫的外部計時器。你可能想在你的點擊函數中放置一些重置循環超時的東西，或者是一個暫停計時器的鼠標懸停，但這些都是你必須隨身攜帶並自己嘗試的東西，因爲你不想使用插件這聽起來像你想爲自己學習一些。但希望這會激發一些正確的方向，但對你來說！