2

ここにフィドルがあります：

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" プラグインを調べましたが、うまく動作しませんでした。これはおそらくさらにバグが多いと思われます。

可能であれば、動作するフィドルを投稿してください。本当に役立ちます。ありがとう！

4

1 に答える 1

2

「一時停止」プラグインを使用すると、次のようにして機能させることができます。

$(".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が好きです。

于 2012-09-08T02:29:24.567 に答える