0

我在尝试创建导航菜单时遇到了问题。我使用 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');
        });
    }
});

这是代码的一个工作示例：单击此处

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

任何帮助表示赞赏。

4

1 回答 1

1

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

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

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

于 2013-05-14T18:24:49.147 回答