How to allow jcarousel scroll to complete if mouse is moved quickly?

i'm using jquery.jcarousel.min.js for a navigation so when you scroll over the external links the scroller moves to that pane.

the issue i'm having is if you move the mouse quick say from item 1 to item 5 the scroll will not complete.

i changed the jquery.jcarousel.min.js so it fires on mouseover

any ideas?

'code' <script type="text/javascript">



    /**

    * We use the initCallback callback

    * to assign functionality to the controls

    */

    function mycarousel_initCallback(carousel) {

        $('.jcarousel-control a').bind('mouseenter', function (e) {



            var position = $(this).position().left;

            $('.jcarousel-skin-tango').animate({ backgroundPosition: position + 'px 0px' }, { duration: 300 });



           carousel.list.stop(false, true);

   开发者_开发知识库         e.stopPropagation();

            carousel.scroll($.jcarousel.intval($(this).attr('rel')));



            return false;

        });



    };



   // Ride the carousel...

   $(function () {

        $("#menu").jcarousel({

            scroll: 1,

            initCallback: mycarousel_initCallback,               

            // This tells jCarousel NOT to autobuild prev/next buttons

            buttonNextHTML: null,

            buttonPrevHTML: null

        });



    });

<ul class="main-nav jcarousel-control">

<li><a href="#1" rel="1" class="main-link active">Departments</a></li>

<li><a href="#2" rel="2" class="main-link">Project Area</a></li>

<li><a href="#3" rel="3" class="main-link">Operations</a></li>

<li><a href="#4" rel="4" class="main-link">Knowledge base</a></li>

<li class="last"><a href="#5" rel="5" class="main-link">The Lounge</a></li></ul>

<div id="menu" class="jcarousel-skin-tango" >

<li>

    <ul class="sub-links item1">

        <li><a href="#">Cellular Assays 1</a></li>

        <li><a href="#">Chemical Development</a></li>

        <li><a href="#">Compound Libraries</a></li>

        <li><a href="#">Computational Chemistry</a></li>

        <li><a href="#">e-Science</a></li>

        <li><a href="#">Ion Channels</a></li>

        <li><a href="#">Medicinal Chemistry</a></li>

        <li><a href="#">Pharmacology</a></li>

        <li><a href="#">Screening</a></li>

        <li><a href="#">Structural Biology</a></li>

        <li><a href="#">Zebrafish</a></li>                      

    </ul>

</li> 

<li>

    <ul class="sub-links item2">

        <li><a href="#">Cellular Assays 2</a></li>

        <li><a href="#">Chemical Development</a></li>

        <li><a href="#">Compound Libraries</a></li>

        <li><a href="#">Computational Chemistry</a></li>

        <li><a href="#">e-Science</a></li>

        <li><a href="#">Ion Channels</a></li>

        <li><a href="#">Medicinal Chemistry</a></li>

        <li><a href="#">Pharmacology</a></li>

        <li><a href="#">Screening</a></li>

        <li><a href="#">Structural Biology</a></li>

        <li><a href="#">Zebrafish</a></li>                      

    </ul>

</li> 

---

What do you mean, will not complete? It stops in the middle of an animation?

You might consider calling some variation of $(myList).stop(...) in the mouseover event that sets up the scroll. For instance, if you always call $(myList).stop(false,true) before triggering the scroll, you'll force the current animation to complete immediately, and the carousel is less likely to get confused. Note that within the jcarousel event handlers, the element that is actually animated is carousel.list, so you would call carousel.list.stop(false,true).

I honestly have no idea if that will help without seeing the code that's called on mouseover.