暫停鼠標懸停簡單的推杆腳本

Question

我想懸停暫停，當鼠標懸停在fadelinks DIV此腳本：

$(function(){ 
    $('.fadelinks > :gt(0)').hide(); 
    setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo 
('.fadelinks');}, 5000); 
}); 

的HTML是沿着線：

<div class="fadelinks"> 
    <div>...</div> 
    <div>...</div> 
</div> 

我嘗試了幾件與interval有關的事情，嘗試在那裏暫停懸停功能，但是由於我的jQuery知識極其有限，但我嘗試過的所有內容都會中斷腳本，使其停留在最後一張幻燈片或第一張幻燈片上。只是想讓這個簡單的腳本暫停鼠標懸停並在鼠標退出時重新啓動。

Here's a JSFiddle其腳本處於自然狀態。

Answer 1

嘗試使用.hover()，聲明變量來引用setInterval，使用函數調用setInterval

$(function(){ 
    // define `_interval` variable 
    var _interval; 
    // cache `.fadelinks` element 
    var elem = $(".fadelinks"); 
    elem.find("> :gt(0)").hide(); 
    elem.hover(function() { 
    // "pause" at `hover` of `.fadelinks` 
    clearInterval(_interval)  
    }, function() { 
    // "reset" 
    interval() 
    }); 
    var interval = function() { 
    _interval = setInterval(function(){ 
       elem.find("> :first-child") 
       .fadeOut().next().fadeIn().end() 
       .appendTo(elem); 
       }, 2000) 
    }; 
    interval() 

}); 

的jsfiddle https://jsfiddle.net/ccmgdfog/4/

Answer 2

就你而言，並不需要jQuery。只有stopInterval你可以控制它。有點jQuery $.stop()函數，我們不會得到所需的結果。

我改了一下代碼：

$(function(){ 
    $('.fadelinks > :gt(0)').hide(); 

    var interval = setInterval(intervalFunc, 2000); 


    $('.fadelinks').on('mouseenter',function(){ 
     clearInterval(interval); 
    }); 
    $('.fadelinks').on('mouseout',function(){ 
     interval = setInterval(intervalFunc, 2000); 
    }); 

    function intervalFunc(){ 
     $('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks'); 
    } 

});