暫停和恢復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's "Pause" plugin，只是無法讓它工作。 Ditto this one，據說甚至是buggier。

如果可以，請發佈一個工作小提琴，它確實有幫助。謝謝！

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

_{P.S.我更喜歡PlaceDog。}