jCarousel stop immediately on mouseover

I'm using jQuery jCarousel for a slider, after few mins I found the way to stop the slider on mouseover, but the problem is it doesn't stop immediately on mouseover, it only stop at the end of the image set (3 images in my demo). However it does start immediately on mouse out. I'm new javascript stuff and couldn't do much by diving to it's source. :(

My Curre开发者_开发问答nt Code - http://bit.ly/ijNcow

Thank You

Often, we manage a jCarousel by using .click(). In this case - you can use the following code to stop the animation:

itemLoadCallback: {
    onBeforeAnimation: function(jc, state) {
        jc.lock();
    }
}  

The jc.lock() or jc.unlock() functions stop and resume the animation, respectively.

The jCarousel code uses two timers that I can see. The timer wrapped in jQuery's animation support and a timer that scrolls the underlying list forward by one item. Your page's code clears the second timer by calling carousel.stopAuto(), but not the animation timer. Hence the animation continues until the next item has been scrolled in (in essence, that the second item reaches the topmost position).

To clear that one you'll have to also call jQuery's stop() function on the carousel element. At a guess (no, I have not tested this), you should call

$('#listing').stop(true); 

Having said that, I'm not sure what will happen to the user experience if you've paused half way through an animation and then started it up again (by moving the mouse out, say). The animation won't start up where you left off, that's for sure. I would also guess that the carousel will assume that the animation completed normally and you'll get a "jump effect" as it sets the top item properly in place.