停止動畫製作懸停的自定義新聞列表代碼

Question

我在做這個自定義新聞代碼（不能爲此插入一個新的插件:-(），並且大部分代碼都完成了，唯一需要停止代碼的東西mouseHover並恢復鼠標移開時動畫..

http://jsfiddle.net/Sullan/EMcMz/4/

這是我使用

function tick(){ 
$('#bigWinners li:first').animate({'left':-150}, 200, function() { $(this).appendTo($('#bigWinners')).css('left', 0); }); 
} 
setInterval(function(){ tick() }, 4000); 

任何人都可以請幫我這個功能。在此先感謝

Answer 1

這就是你需要：

http://jsbin.com/ifokak/4/edit

var intv;  
function tick(){  
    intv = setInterval(function(){ 
    $('#bigWinners li:first').animate({left:-150}, 200, function() { 
     $(this).appendTo('#bigWinners').css('left', 0); 
    }); 
    },2000);  
} 
tick(); // initial kick 

$('.mini-carousel').on('mouseenter mouseleave', function(e){ 
    var mEnt = e.type=='mouseenter' ? clearInterval(intv) : tick() ; 
}); 

BTW使用.appendTo('#bigWinners')代替.appendTo($('#bigWinners'))

Answer 2

您可以使用調用clearInterval（），當你鼠標移開

當你的mouseenter和重啓定時器

var timer = setInterval(tick, 1000); 

$('#bigWinners').on({ //<-- change depending on which elements you want these to trigger on 
    mouseenter: function(){ 
    clearInterval(timer); 
    }, 
    mouseleave: function(){ 
    timer = setInterval(tick, 1000); 
    } 
}); 

FIDDLE