暫停使用jQuery

Question

我使用 Infinite Loop function

做出無限循環這是一個有點修改了我的需求：

$(document).ready(function() { 
var NewsRotator = {init: function() 
{ 
    var numberOfTitles = $('.NewsRotator li').length; 
    //set current item 
    var currentTitle = 0; 
    //show first item 
    $('.NewsRotator li').eq(currentTitle).fadeIn(1000); //initial fade-in 
    //loop through the items 
    var infiniteLoop = setInterval(function(){ 
     $('.NewsRotator li').eq(currentTitle).fadeOut(100); //current item fade-out time 
     if(currentTitle == numberOfTitles -1){ 
      currentTitle = 0; 
     }else{ 
      currentTitle++; 
     } 
     $('.NewsRotator li').eq(currentTitle).fadeIn(900); //next item fade-in time 
    }, 3000); //interval between items 
} 
}; 
NewsRotator.init(); 
}); 

這裏是jsFiddle

我想要做的是設置一個工作示例動畫暫停在鼠標懸停並在鼠標離開時恢復。

謝謝！

Answer 1

下面是設置全局標誌以暫停和播放懸停的方法，以及jsFiddle。

var NewsRotator = (function(){ 
var numberOfTitles = $('.NewsRotator li').length, 
    currentTitle = 0; 
return { 
    flag : true, 
    init : function(){ 
     $('.NewsRotator').on({ 
      mouseenter : function(){ 
       NewsRotator.flag = false; 
      }, 
      mouseleave : function(){ 
       NewsRotator.flag = true; 
      } 
     }); 
     $('.NewsRotator li').eq(currentTitle).fadeIn(1000); 
     infiniteLoop = setInterval(function() { 
      if (NewsRotator.flag == true){ 
       $('.NewsRotator li').eq(currentTitle).fadeOut(100); 
       if (currentTitle == numberOfTitles - 1) { 
        currentTitle = 0; 
       } else { 
        currentTitle++; 
       } 
       $('.NewsRotator li').eq(currentTitle).fadeIn(900); 
      } else { 
       return false; 
      } 
     }, 3000); 
    } 
}; 
}()); 
$(document).ready(function(){ 
NewsRotator.init(); 
}); 

而且 - 我認爲你可以通過緩存「禮」選擇略微提高性能。

Answer 2

有兩種方法來實現這一目標：

1. 清除動畫，然後重新啓動它。這也將確保與下一個項目的差距永遠保持不變。
2. 使用全局標誌可以儘早從循環函數返回。只要鼠標位於新聞項目上，就將標誌設置爲true。

Answer 3

看看這個JQFAQ.com，這裏是暫停和恢復計時器的答案。這裏有更多的常見問題，我希望這可以幫助你獲得更多的想法