Question

我有一个像这样的jquery函数：

$(function()
var ticker = function()
{
    setTimeout(function(){
    $('#ticker li:first').animate( {marginTop: '-22px'}, 250, function()
    {
       $(this).detach().appendTo('ul#ticker').removeAttr('style');});
       ticker();
    }, 1500);       
};

$('#ticker').hover(function() { 
    $('#ticker').stop();         
});

ticker();

});

我尝试使用.stop() API停止鼠标上的动画，并在鼠标移出时播放动画但我不知道。请帮忙。

更新：解决了：http://jsbin.com/ilated

Answer 1

您可能还需要在clearTimeout( )函数中调用.hover( )来清除已经运行的超时。然后在.hover(函数（第二个参数）的'mouseout'部分中，再次调用ticker( )来重新启用它。

以下是未经测试的：

var ticker_timeout = false;
$(function()
var ticker = function()
{
    ticker_timeout = setTimeout(function(){
    $('#ticker li:first').animate( {marginTop: '-22px'}, 250, function()
    {
       $(this).detach().appendTo('ul#ticker').removeAttr('style');});
       ticker();
    }, 1500);       
};

$('#ticker').hover(function() { 
    $('#ticker li:first').stop();
    clearTimeout(ticker_timeout);       
}, function( ) {
    ticker();
});

ticker();

});

编辑：adeneo是正确的，你需要停止动画的元素。固定在上面

Answer 2

您需要停止设置动画的元素：

$('#ticker li:first').stop();

此外，hover接受两个函数，而不是一个，你需要停止循环。

Answer 3

hover可以进行2次回调，一次用于mouseenter，另一次用于mouserleave。你可以尝试这样的事情。停止动画后，如果有动画，也应该清除超时。

$(function()
 var timerId;
 var ticker = function()
 {
    timerId = setTimeout(function(){
    $('#ticker li:first').animate( {marginTop: '-22px'}, 250, function()
    {
       $(this).detach().appendTo('ul#ticker').removeAttr('style');});
       ticker();
    }, 1500);       
 };

 $('#ticker').hover(function() { 
     $('#ticker  li:first').stop();         
     clearTimeout(timerId);   
 }, ticker);

 ticker();

});

jQuery：在鼠标悬停时停止动画

3 个答案: