jQueryUI 选项卡 : stop rotating while hover

Question

我使用 jqueryUI 构建了一些旋转选项卡。当用户将鼠标移动到选项卡式菜单和选项卡式内容上时，选项卡应停止旋转。我读了一篇useful tutorial ，但这对我不起作用。

尽管我将光标移到选项卡上，选项卡仍然保持旋转。一旦我将鼠标悬停在 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);