Question

我正在做这个自定义新闻自动收录器（无法为此插入一个新的插件:-(）并且大部分都已完成，我需要停止mouseHut上的自动收录器并在mouseOut上恢复动画。

这是我正在使用的功能

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

任何人都可以帮助我。提前致谢

Answer 1

鼠标输入时可以使用clearInterval（），鼠标输出时重启计时器

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

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

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

在悬停时停止动画自定义新闻列表自动收录器

2 个答案: