jQuery ScrollTo: Multiple clicks on link = funky movement stacking

Question

Here is the code:

$('.next').click(function(){
        $(window).stop(true,true).scrollTo('+=800px', 1000, { axis:'x' } );
 });
$('.prev').click(function(){
        $(window).stop(true,true).scrollTo('-=800px', 1000, { axis:'x' } );
 });

Site can be previewed here: http://www.allisonnavon.com/index.php?/projects/raw-rhythm/

When the » are clicked more than once, it queues them up, even with the stop(true,true) parameter. Anyone know why?

Answer 1

.stop() only affects the animation queue for that element, instead you can just .animate() in this case (no need for the scrollTo plugin here):

$('.next').click(function(){
  $("html, body").stop(true,true).animate({ scrollLeft: '+=800' }, 1000);
});
$('.prev').click(function(){
  $("html, body").stop(true,true).animate({ scrollLeft: '-=800' }, 1000);
});

This way the .stop() will effect the animation queue on those elements.