Как разрешить прокрутку jcarousel, если мышь двигается быстро? - PullRequest
Новая
       24

Как разрешить прокрутку jcarousel, если мышь двигается быстро?

1 голос
/ 11 февраля 2011

Я использую jquery.jcarousel.min.js для навигации, поэтому, когда вы прокручиваете внешние ссылки, скроллер перемещается на эту панель.

У меня возникает проблема, если вы перемещаете мышьбыстрый переход от пункта 1 к пункту 5. прокрутка не будет завершена.

Я изменил jquery.jcarousel.min.js, чтобы он срабатывал при наведении курсора

Есть идеи? 

'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>

1 Ответ

0 голосов
/ 15 февраля 2011

Что ты имеешь в виду, не завершится? Останавливается в середине анимации?

Вы можете подумать о вызове некоторого изменения $ (myList) .stop (...) в событии mouseover, которое устанавливает прокрутку. Например, если вы всегда вызываете $ (myList) .stop (false, true) до запуска прокрутки, вы заставите текущую анимацию завершиться немедленно, и карусель с меньшей вероятностью будет запутана. Обратите внимание, что в обработчиках событий jcarousel фактически анимированный элемент имеет вид carousel.list , поэтому вы должны назвать carousel.list.stop (false, true) .

Честно говоря, я понятия не имею, поможет ли это, не увидев код, вызываемый при наведении мыши.

...