Вкладки jQueryUI: перестать вращаться при наведении

Question

Я строю несколько вращающихся вкладок, используя jqueryUI.Пока пользователь наводит указатель мыши на меню с вкладками и содержимое с вкладками, вкладки должны перестать вращаться.Я прочитал полезное руководство , но оно не работает для меня.

Вкладки все еще продолжают вращаться, хотя я перемещаю курсор над ними.Как только я поймал div#menu-prime, вкладки ведут себя глупо!

<script type="text/javascript">
$(document).ready(function(){
    $("#menu-prime").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
    $('#menu-prime').hover(function(){
            $(this).tabs('rotate', 0, false);
        },function(){
            $(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
        }
    );
});
</script>

<div id="menu-prime">

    <ul class="ui-tabs-nav">
        <li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1">Kochen</a></li>
        <li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2">Wohnen</a></li>
        <li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3">Schlafen</a></li>
        <li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4">Mehr</a></li>
    </ul>

    <div id="fragment-1" class="ui-tabs-panel" style="">Content 1</div>
    <div id="fragment-2" class="ui-tabs-panel" style="">Content 2</div>
    <div id="fragment-3" class="ui-tabs-panel" style="">Content 3</div>
    <div id="fragment-4" class="ui-tabs-panel" style="">Content 4</div>

</div>

СПАСИБО, Йоханнес

---

РЕДАКТИРОВАТЬ: Улучшение

Благодаря Ким, вращающиеся вкладкитеперь ждите, когда пользователь наведет курсор на одну из вкладок.

$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000, true);
$('#menu-prime').mouseover(function(){
    $(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
    $(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000);
});

Изначально хотел, чтобы вкладки менялись при наведении мыши, а не при щелчке.Поэтому я изменил код Кима:

$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);
$('#menu-prime').mouseover(function(){
    $(this).tabs('rotate', 0, false);
});
$('#menu-prime').mouseout(function(){
    $(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
});

Теперь вкладки и особенно автоповорот ведут себя очень странно, когда пользователь наводит любую вкладку.Я думаю, что два события при наведении мыши усложняют друг друга?

Answer 1

Попробуйте вместо этого:

 $('#menu-prime').mouseover(function(){
            $(this).tabs('rotate', 0, false);
    });
 $('#menu-prime').mouseout(function(){
            $(this).tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 3000);
    });

Редактировать: вы делаете разные вещи на одном и том же событии.поэтому вам следует смело изменить свой код на это:

 $('#menu-prime').mouseover(function(){
        $(this).tabs('rotate', 0, false);
    });
    $('#menu-prime').mouseout(function(){
        $(this).tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000);
    });

и удалить

$("#menu-prime").tabs({ fx: {opacity: 'toggle', duration:100} }).tabs({event: 'mouseover'}).tabs('rotate', 3000, true);

Answer 2

 $('#imageCarousel').tabs({ fx: {opacity: 'toggle', duration:100} }).tabs('rotate', 3000);

     $("#imageCarousel ul li a").mouseover(function(){ 
               $("#imageCarousel").tabs('rotate', 0, false);

          $("#imageCarousel").tabs("option", "active", $(this).parent().index());

      });
       $('#imageCarousel').mouseout(function(){
        $(this).tabs('rotate', 3000, true);
    });

Answer 3

jQuery UI, начиная с версии 1.9, имеет много изменений, теперь вращение вкладок и пауза при наведении курсора можно использовать только с расширениями.Для наведения - просто используйте мое расширение Вкладки jQuery UI: пауза при наведении