jQuery:鼠标停留时停止动画

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

您可能还需要在.hover( )函数中调用clearTimeout( )来清除已经运行的超时。然后在.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();
});

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