CODEWITHSUNDEEP
javascriptjqueryjquery-animate
Ben
Ben

Reputation: 11502

Pause and resume jquery animation?

Here's a fiddle:

http://jsfiddle.net/vBt5E/

I want to pause and unpause an endlessly scrolling jquery animation on hover, without any weird jumps.

html like this:

<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 like so:

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();
});

I know this has been asked in different form before but the various answers aren't working for me. I looked at Tobia Conferto's "Pause" plugin and just couldn't get it to work. Ditto this one, which is supposedly even buggier.

Please post a working fiddle if you can, it really helps. Thanks!

Upvotes: 2

Views: 3627

Answers (1)

Charlie
Charlie

Reputation: 11777

Using the "Pause" plugin, you can get it working by doing the following:

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

Example: http://jsfiddle.net/charlescarver/vBt5E/1/

Make sure you include the plugin on your page! https://raw.github.com/tobia/Pause/master/jquery.pause.min.js

P.S. I prefer PlaceDog.

Upvotes: 2

Related Questions