Question

I have tested the scrollTo() plugin, but I need a way to stop the scrolling animation, so I am looking at serialScroll().

Here is what I used with scrollTo:

$('#scroller').scrollTo('1000px', 3000);

My question is, how do I do this same thing with serialScroll? I can’t get it to work the same way as scrollTo, isn’t that what it is suppose to do, just add tons of extra options?!

Answer 1

As SerialScroll binds several events (incuding thestop event) you can use toggle to start/stop the scrolling based on clicks:

// setup serialScroll to scroll the images in the 'serialScroll-test' div along
// the y-axis.
$('#serialScroll-test').serialScroll({items: 'img', duration: 2000, axis: 'y', interval: 1, force: true});
// since we used the "force: true" option to auto-start the animation we use
// "stop" as the first function to toggle and "start" second.
$('#serialScroll-test').toggle(function(){ 
  $('#serialScroll-test').trigger('stop.serialScroll'); 
}, function() { 
  $('#serialScroll-test').trigger('start.serialScroll'); 
});

On the following HTML:

  <div id="serialScroll-test" style="float: left; width: 600px; height: 333px; overflow: hidden;"> 
    <img class="scrollable" src="http://farm4.static.flickr.com/3489/3849497254_4722754872.jpg" alt="IMG_7997" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2487/3867263002_f6b368d983.jpg" alt="IMG_8005" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2528/4043006363_81931d7985.jpg" alt="IMG_2235" /> 
  </div> 

Example (edit the source)

note: when the stop event is called the animation stops on the item being scrolled to, not immediately. So if you click on the first image while it is scrolling to the second one the animation will continue till the second image is in view and then stop. This also means that when using cycle: true (the default) if you click during the return to the first image the animation will continue till the first image is in view and then stop.

EDIT:

After looking a bit deeper I found this post on Ariel Flesler’s blog (the plugins author). In the snippets section a script is included on how to stop the animation on hover. It includes a note:

// You can temove the .stop() to let it finish the active animation
...
   $(this).stop().trigger('stop');
...

Notice the additional stop() in the trigger. Based on the code I posted above you can change the toggle() function to:

$('#serialScroll-test').toggle(function(){ 
  $('#serialScroll-test').stop().trigger('stop.serialScroll'); 
}, function() { 
  $('#serialScroll-test').stop().trigger('start.serialScroll'); 
});

to produce the desired effect. Updated example here (edit it)