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/