javascript - 暂停和恢复jquery动画？

Question

这是一个小提琴：

http://jsfiddle.net/vBt5E/

我想在悬停时暂停和取消暂停无限滚动的 jquery 动画，没有任何奇怪的跳跃。

像这样的html：

<div id="vertical-carousel">
    <div class="imagecolumn">
        <a href="#"><img src="http://placekitten.com/200/120" width="200" height="120"></a>
        <a href="#"><img src="http://placekitten.com/200/100" width="200" height="100"></a>
        <a href="#"><img src="http://placekitten.com/200/80" width="200" height="90"></a>
    </div>
</div>
​

像这样的javascript：

var imageColumn = $('.imagecolumn');

origColumnHeight = imageColumn.height();

$(document).ready(function() {

    var columnDupe = imageColumn.contents()
                                .clone()
                                .addClass('dupe')
                                .appendTo(imageColumn);

    function scrollColumn() {
        imageColumn.css({'top': '0'})
                   .animate({top: -origColumnHeight},15000, 'linear', scrollColumn);

    }

    scrollColumn();
});

我知道以前曾以不同的形式提出过这个问题，但各种答案对我不起作用。我查看了Tobia Conferto 的“Pause”插件，但无法让它工作。同上这个，据说它甚至更加错误。

如果可以的话，请发布一个工作小提琴，它真的很有帮助。谢谢！

Answer 1

使用“暂停”插件，您可以通过执行以下操作使其工作：

$(".imagecolumn").hover(function() {
  $(this).pause();
}, function() {
  $(this).resume();
});

示例：http: //jsfiddle.net/charlescarver/vBt5E/1/

确保在页面上包含插件！https://raw.github.com/tobia/Pause/master/jquery.pause.min.js

_{PS我更喜欢PlaceDog。}