Question

我正在使用jQuery的animate()函数和TimeOut（）来创建股票代码效果。由于代码有点长，为了更好地理解效果，我将代码上传到JSBin (click to see)。动画效果很好，但是当用户用鼠标悬停时，我想让它暂停。

创建股票代码效果的代码中最重要的部分（如果你没有进入JSBin链接）是：

var stocksTicker = function () {
    setTimeout(function () {
        $('#ticker li:first').animate({
            marginTop: '-27px'
        }, 800, function () {
            $(this).detach().appendTo('#ticker');
        });
        stocksTicker();
    }, 4000);
};
stocksTicker();

我尝试使用以下代码制作暂停效果：

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

但是使用它只会搞乱整个动画（you can view the result here）。

如何才能获得不会弄乱动画的正常暂停效果？

谢谢！

乔尔

Answer 1

您可以使用 clearTimeout

var tmr = null;
var stocksTicker = function () {
    tmr = setTimeout(function () {
        $('#ticker li:first').animate({
            marginTop: '-27px'
        }, 800, function () {
            $(this).detach().appendTo('#ticker').removeAttr('style');
        });
        stocksTicker();
    }, 1000);

};
stocksTicker();

$('#ticker li').hover(function () {
    clearTimeout(tmr)
}, function () {
    stocksTicker();
});

Try it here

Answer 2

我会在那里放一张支票来优雅地停止（即如果动画已经开始，它就会完成动画）。我也会使用setInterval而不是setTimeout：

var run = true;
var stocksTicker = function()
{

      setInterval(function(){
        if(run){
            $('#ticker li:first').animate( {marginTop: '-27px'}, 800, function()
            {
                $(this).detach().appendTo('#ticker').removeAttr('style');
            });
        }
      }, 4000);

};
$('#ticker li').hover(
  function(){
     run = false; 
  },
  function(){
     run = true;
  });
stocksTicker();

使用jQuery停止使用TimeOut的动画

2 个答案:

Try it here