jquery - 在悬停时停止动画自定义新闻列表代码

Question

我正在做这个自定义新闻自动收报机（不能为此插入一个新插件:-(）并且大部分工作已经完成，我唯一需要在 mouseHover 上停止自动收报机并在 mouseOut 上恢复动画..

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

您可以在 mouseenter 时使用 clearInterval() 并在 mouseout 时重新启动计时器

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);
  }
});

小提琴

Answer 2

这就是你所需要的：

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() ;
});

顺便说一句，使用.appendTo('#bigWinners')而不是.appendTo( $('#bigWinners') )