JQuery的動畫邊框

Question

我有這樣的HTML代碼

<nav id="mainNav"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li>   
    </ul> 
</nav> 

它有這個

#mainNav { display:block; padding:5px; } 
    #mainNav ul { display:block; list-style-type:none; width:500px; border-collapse:collapse; } 
    #mainNav li { display:inline-block; width:100px; height:66px; text-align:center; padding-top:10px; float:left; background-color:gray; cursor:pointer; border-bottom:0px solid red; } 
    #mainNav a { color:white; text-decoration:none; text-transform:capitalize; } 
    #mainNav a.aHover { color:red; } 

CSS樣式和連接到這是jQuery代碼

$(document).ready(function() { 
$('#mainNav li').mouseover(function() { 
    var el = $(this); 
    $(this).animate({ 
    "border-bottom-width":"+=5px" 
    },{ queue: false, duration: 500 }, function() { 
    el.css('border-bottom-width', '5px'); 
    }); 
    $(this).children('a').addClass('aHover'); 
}); 
$('#mainNav li').mouseout(function() { 
    var el = $(this); 
    $(this).animate({ 
    "border-bottom-width":"-=5px" 
    },{ queue: false, duration: 500 }, function() { 
    el.css('border-bottom-width', '0px'); 
    }); 
    $(this).children('a').removeClass('aHover'); 
}); 
}); 

現在我想要它做的是，淡入邊框顏色變成紅色並淡出，或者如代碼中所寫，在懸停時將邊框展開爲最大5px將邊界放回0px。

的問題是，你可以看到我試着改變類LI元件在動畫結束，以確保邊境進入其最大或最小寬度，但不起作用，爲什麼呢？

你會如何淡入和淡出邊框顏色？

Answer 1

嘗試以下，

DEMO

$(document).ready(function() { 
    $('#mainNav li').hover(function() { 
     var el = $(this); 
     $(this).stop(true, true).animate({ 
      "border-bottom-width": "5px" 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).children('a').addClass('aHover'); 
    }, function() { 
     var el = $(this); 
     $(this).stop(true, true).animate({ 
      "border-bottom-width": "0px" 
     }, { 
      queue: false, 
      duration: 500 
     }); 
     $(this).children('a').removeClass('aHover'); 
    }); 
}); 

改變，

1. mouseover事件mouseenter，因爲它是在你的情況下，更合適的
2. 改變mouseenter/mouseleave到hover
3. 更改爲+=5px,-=5px至5px和0px。
4. 添加.stop(true, true)以確保動畫已完成且隊列已清除。