jquery/ui menu mouseover/out/click动画问题

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在动画完成之前不会有“selected”类。因为你的李没有这个类，所以当你移出它时，它会进入你的时差函数的其他部分，并变得透明。该解决方案是把你的addClass与removeClass功能，这样的回调之外：

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

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