JQuery Tools Scrollable -- stopping animation?

Question

I have a box that takes an input, then uses the scrollable's seekTo method on keyup to go to a particular slide. The problem is that if someone types quickly the scrollable gets a large queue and it takes a while for the animation to stop.

What I would like is on keyup the previous animation stops (unless the input is empty) and the new animation starts. I've tried putting .stop() in various places, but nothing seems to work.

Here is a fiddle of something similar to what I'm doing: http://jsfiddle.net/QaMZH/

Putting a number in the box (ex:1) then changing it to another number (ex: 2) will animate the scrollable to that slide number, but changing the numbers quickly queues a bunch of animations that can take a while to finish.

Answer 1

I had the same problem, and after searching for more detailed documentation and fail, I just dug into the code.

It turns out that all you need to do is call this before .seekTo():

api.getItemWrap().stop(true, false);
api.seekTo($(this).val(), 1000);

where getItemWrap() returns the target jQuery element where the animation takes place.

See http://jsfiddle.net/QaMZH/4/ how the modified version works.

This works because .seekTo() method calls the jQuery .animation() method on the elements, and you can cancel jQuery animations any time with .stop().