设置边框的动画

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;
}

正如你所看到的，例程是这样的，有一个用于当前菜单的类，每当用户将鼠标悬停在其中一个菜单中时，就会删除当前菜单的该类，并在当前悬停菜单和mouseout事件中添加一个类"currentitem"，类"current_item"从当前悬停的元素中删除，类"current_item"被添加回当前菜单，该菜单也有一个类"damenu"，正如你所看到的，类"current_item"的工作是添加顶部和底部边界，效果很好，但我想在鼠标悬停或在鼠标悬停时在边界或类"current_idtem"中添加一些动画。

确切地说，无论何时在mouseover或mouseout事件中，我都想为边界或类"current_item"设置动画，还有，我是否可以将导航设置为中心？

我对、想法、建议和建议持开放态度。希望这里有人能帮忙，谢谢。

Answer 1

您可以不将以下内容添加到.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 2

您可以仅通过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 3

获取JQuery颜色动画插件，然后：

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