悬停时显示导航背景色动画时出现的问题

Question

好吧，我在我的网站上有一个导航菜单，当我将鼠标悬停在菜单上的某个项目上时，我似乎无法让这段代码工作。我试了两个代码：

代码1：

$("#nav li").hover(function() {
  $(this).animate({backgroundColor: "#ffffff"}, 'slow');
});

代码2：

$(document).ready(function(){
  $("#nav li").hover(
   function() {
    $(this).stop().animate({backgroundColor: "#ffffff"}, "slow");
   },
   function() {
    $(this).stop().animate({backgroundColor: "#09c"}, "slow");
   });

 });

这是我的css，只是为了以防万一：

#nav {
margin-left:380px;
float:left;
width:650px;
margin-top:-47px;
}

#nav ul {
list-style-type:none;
}

#nav ul li {
float:left;
}

#nav ul li a {
text-align:center;
border-right:1px solid #fff;
display:block;
text-decoration:none;
color:#fff;
padding:20px;
}

#nav ul li ul {
display:none;
}

#nav ul li:hover ul {
display:block;
position:absolute;
background:#fff;
}

#nav ul li a:hover {
display:block;
background:#fff;
color:#09c;
}

顺便说一句，我还将jQuery JavaScript库v1.9.1包含到了站点中(不确定这对您是否有用)

谢谢:)

Answer 1

您需要包含jquery颜色插件来设置颜色动画。

这里：http://code.jquery.com/color/jquery.color-2.1.1.min.js

实际上，JQuery基础库不支持此功能。

注意，.css('backgroundColor','#333333')是有效的，但不是等效的动画，所以你可以先用css()测试你的代码，然后再用动画()试一试，然后再把插件链接到你的页面。

Answer 2

请尝试以下css代码以更改导航菜单背景颜色

#nav ul li a:hover {
 background-color:#ffffff;
}

Answer 3

使用CSS3过渡来实现此效果，这会更方便。http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/