Question

这是一个小提琴：

我想在悬停时暂停和取消暂停滚动的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但是无法让它发挥作用。同上this one，据说甚至比较吵。

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

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。

暂停和恢复jquery动画？

1 个答案: