Question

我在尝试创建导航菜单时遇到了问题。我使用jqueryui定义了三个函数，一个onmouseover函数，一个onmouseout函数和一个onclick函数。第一个用于模拟悬停效果，最后一个用于更改选择。除非我在选择动画完成之前从单击选项中删除鼠标，否则一切都很有效。

以下是代码：

HTML

<ul id="inav">
    <li class="opt selected">Option1</li>
    <li class="opt">Option2</li>
    <li class="opt">Option3</li>
    <li class="opt">Option4</li>
    <li class="opt">Option5</li>
</ul>

CSS

body
    {
        background: #000;
    }
#inav
    {
        display: block;
        width: 300px;
        height: 400px;
        float: left;
        margin: 0;
        padding: 0;
        padding-top: 60px;
        background: url('../img/nbg.png');
    }
.opt
    {
        display: block;
        width: 100%;
        height: 40px;
        list-style: none;
        color: #FFF;
        font-size: 1.7em;
        text-align: center;
        cursor: pointer;
        padding-top: 10px;
        text-shadow: 0 0 1px #FFF;
    }
.selected
    {
        background: #00F;
    }

Jquery的

$('.opt').mouseover(function(){
    $(this).animate({backgroundColor: '#F00'}, 400 );
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({backgroundColor: '#00F'}, 400 );
    }
    else
    {
        $(this).animate({backgroundColor: 'transparent'}, 400 );
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {
        $('.selected').animate({backgroundColor: 'transparent'}, 400, function(){
            $('.opt').removeClass('selected');
        });
        $(this).animate({backgroundColor: '#00F'}, 400, function(){
            $(this).addClass('selected');
        });
    }
});

以下是代码的工作示例：CLICK HERE

我知道问题是onmouseover函数在不应该运行时运行，但我不知道为什么或如何修复它。

感谢任何帮助。

Answer 1

移出时所选项目变为透明的原因是因为您将$(this).addClass('selected');放入动画的回调函数中，这意味着在动画完成之前，您的li将不会“选择”该类。因为你的李没有上课，所以当你搬出时它将进入你的时差功能的其他部分并变得透明。解决方法是将addClass和removeClass函数放在回调之外，如下所示：

    $('.selected').animate({backgroundColor: 'transparent'}, 400);
    $('.opt').removeClass('selected');
    $(this).addClass('selected'); 
    $(this).animate({backgroundColor: '#00F'}, 400);

我创建了一个jsfiddle来向您展示它的样子：http://jsfiddle.net/7nrZ6/

jquery / ui菜单鼠标悬停/输出/点击动画问题

1 个答案: