jquery animate - 如果另一个动画开始则停止动画完成

Question

谁能帮助我更好地理解动画。

我想知道是否可以在运行时停止当前的动画位置。然后从另一个动画函数，将其从当前位置转移到新位置。

很难解释这一点，所以我创建了一个 fiddle ...

Fiddle

http://jsfiddle.net/motocomdigital/L5uh4/9/

在 fiddle 中，您将看到一条推文。如果您只需将鼠标悬停在推文上，它就会以动画方式向左定位，从而将整条推文带入 View 。

但是，如果您滚动推文，它会以动画方式返回到开头。

注意:如果推文短于可见推文区域，动画将不会运行。如果发生这种情况，请将 fiddle 窗口缩小到大致以下大小，然后重新运行 fiddle .

我的问题

如果我连续在推文上悬停 10 次。它想要在队列中一个接一个地运行所有 10 个动画交替。

我不希望这种情况发生，我需要它，所以如果我将鼠标悬停在推文上 - 动画开始，但如果我将鼠标悬停在关闭(动画完成之前)，我希望它在当前位置暂停并动画到悬停关闭位置。并且不堆叠队列。但反之亦然也可以吗？

有没有简单的方法？谢谢

查看我的代码

$("#tweet").tweet({

    username: ["seaofclouds", "laughingsquid"],
    count: 1,
    template: "{text}",
    avatar_size: 32

}).bind("loaded", function(){

    var visible = $('#tweet ul').width(),
        spanTweet = $('span.tweet_text').width();  

    if ( spanTweet > visible ) {

        $('#tweet ul').hover(function() {

            $('#tweet ul li').animate({            
                left : '-' + ( spanTweet - visible ) + 'px'              
            }, 3000 );

        }, function() {

            $('#tweet ul li').animate({              
                left : '0px'              
            }, 3000 );

        });

    }

});

预先感谢您对此提供的任何帮助:)

Answer 1

还有一个关于 .stop 的问题.

$('#tweet ul li').stop().animate( ... );

我希望this fiddle就是你想要的。