javascript - 悬停时导航的动画背景颜色问题

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

请尝试下面的 CSS 代码来更改导航菜单背景颜色

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

Answer 2

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

Answer 3

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

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

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

请注意，.css('backgroundColor','#333333')但不是等效的动画，因此您可以使用 css() 测试您的代码，然后在将插件链接到您的页面之前使用 animation() 尝试它。