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>

谢谢你，约翰斯

编辑:增强

多亏了Kim，当用户悬停其中一个选项卡时，旋转选项卡就会等待。

$("#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);
});

最初希望在鼠标上更改选项卡，而不是单击。因此，我修改了Kim的代码：

$("#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

jQuery UI自1.9以来有很多变化，现在旋转选项卡和暂停悬停，您只能使用扩展。对于悬停-只需使用我的扩展jQuery UI选项卡: Hover上的暂停

Answer 3

 $('#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);
    });