動畫邊框

Question

我有這個jQuery代碼。

//this is the main javascript 

$(document).ready(function(){ 

    $('nav.menu a').hover(
     function() { 
      $('nav.menu').find(".current_item").removeClass("current_item"); 
      $(this).addClass("current_item"); 

     }, 
     function() { 
      $(this).removeClass("current_item"); 
      $('nav.menu').find(".damenu").addClass("current_item") 
     } 
); 

}); 

這個HTML結構

<nav class="menu"> 
    <a href="home.html" class="current_item damenu">Home</a> 
    <a href="gallery.html">Gallery</a> 
    <a href="home.html">Portfolio</a> 
    <a href="home.html">About</a> 
    <a href="home.html">Contact</a> 
</nav> 

和這個CSS

.menu 
{ 
background: 1px solid #00ffff; 
width: 100%; 
padding: 0px 0px 0px 10px; 
} 
.menu a 
{ 
padding: 8px; 
color: #0099ff; 
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,  Verdana, sans-serif; 
text-decoration: none; 
float: left; 
margin-right: 8px; 
text-shadow: 2px 1px 1px #ffffff; 
border-top: 3px solid transparent; 
border-bottom: 3px solid transparent; 
} 
.current_item /*, .menu a:hover*/ 
{ 
color: #C5F700 !important; 
border-top: 3px solid #C5F700 !important; 
border-bottom: 3px solid #C5F700 !important; 
} 

，你可以看到，程序是這樣的，對於當前菜單每當用戶類將鼠標懸停在其中一個菜單中，當前菜單的類將被刪除，並將類「current_item」添加到當前懸停菜單和mouseout事件中，類「current_item」將從當前懸停元素中移除，並且類「current_item」被添加回當前菜單，該菜單也有一個「damenu」類，正如你所看到的類「current_item」的工作是添加頂部和底部邊界並且它工作得很好，但是我想在鼠標懸停或鼠標懸停時，在邊框或類「current_item」中添加一些動畫。

所以，我想在mouseover或mouseout事件時爲邊界或類「current_item」設置動畫，還有，我可以使導航進入中心嗎？

我打開，想法，建議和建議。希望這裏有人能夠幫助，謝謝。

Answer 1

您可以動畫邊境僅CSS

.menu 
{ 
background: 1px solid #00ffff; 
width: 100%; 
padding: 0px 0px 0px 10px; 
} 
.menu a 
{ 
padding: 8px; 
color: #0099ff; 
font: bold 20px Archivo Narrow, Arial Rounded MT, Tahoma, Calibri, Asap, Arial,  Verdana, sans-serif; 
text-decoration: none; 
float: left; 
margin-right: 8px; 
text-shadow: 2px 1px 1px #ffffff; 
border-top: 3px solid transparent; 
border-bottom: 3px solid transparent; 
-webkit-transition: 1s all ease; 
-moz-transition: 1s all ease; 
-ms-transition: 1s all ease; 
-o-transition: 1s all ease; 
transition: 1s all ease; 
} 
.menu a.current_item, .menu a:hover 
{ 
color: #C5F700 !important; 
border-top: 3px solid #C5F700 ; 
border-bottom: 3px solid #C5F700 ; 
} 

Answer 2

你不只是add the following到.current_item？

-webkit-transition: .5s border-color, color ease; 
-moz-transition: .5s border-color, color ease; 
-ms-transition: .5s border-color, color ease; 
-o-transition: .5s border-color, color ease; 
transition: .5s border-color, color, ease; 

Answer 3

獲取JQuery的顏色動畫插件，則：

$('#currentitem').hover(function(){ 
     (this).animate({borderColor:'#fff'}); 
    }, function(){ 
     (this).animate({borderColor:'#000'}); 
    });