jQuery的animate关于导航菜单背景色渐近渐出的问题
我想做个导航菜单(默认的背景色为白色)，当鼠标移上去的时候，背景色变为红色且以动画的形式渐渐的淡入，当鼠标移开之后，背景色渐渐的淡出，变为白色，我用jQuery的animate好像达不到效果，希望大家能帮我指点下，先谢谢啦！
- HTML code
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style> .mainContent{ position: absolute; top:10px; left: 50px; right: 50px; height: 50px; } ul{ float: left; margin: 0; padding: 0; } li{ float: left; padding: 5px; list-style: none; cursor: pointer; border: 1px solid red; margin-left: 2px; } </style> <script> $(function(){ $('.mainContent ul li').mouseover(function(){ $(this).animate({ //起不到作用 backgroundColor:'blue', //用透明度的话，字体跟着变淡了，字体是要求不变的 opacity:0.2 },500); }) $('.mainContent ul li').mouseout(function(){ $(this).animate({ backgroundColor:'#000', opacity:1 },500); }) }) </script> </head> <body> <div class="mainContent"> <ul> <li id="mao">首页</li> <li>系统配置</li> <li>系统管理</li> <li>退出</li> </ul> </div> </body></html>[解决办法]
animate（）对color是无效的，只能设置一个height,width，opacity几个常用的。
[解决办法]
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
在它后面再加载：jquery的UI库文件:可能是这个名字jquery-ui.min.js，也有可能加了版本号的。你应该有的了
[解决办法]
[解决办法]
1、animate对backgroundColor是无效的，这个可以参考#3楼链接里面的参数列表看看，里面没有backgroundColor
2、我对你的代码没有改动，只是修改了下背景色
3、网上搜索了一下解决方案，找到解决办法，可参考这个帖子
http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
增加了一个jquery.color.js插件，这个插件的地址是
https://github.com/jquery/jquery-color
https://github.com/jquery/jquery-color
然后你要的效果就有了，一下是我的测试的代码，背景色可以改变
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script language="JavaScript" src="/js/jquery-1.8.2.min.js" type="text/javascript"></script><script language="JavaScript" src="/js/jquery.color.js" type="text/javascript"></script><style type="text/css"> .mainContent{ position: absolute; top:10px; left: 50px; right: 50px; height: 50px; } ul{ float: left; margin: 0; padding: 0; } li{ float: left; padding: 5px; list-style: none; cursor: pointer; border: 1px solid red; margin-left: 2px; } </style> <script type="text/javascript"> $(function(){// $('#mao').mouseover(function(){// $(this).animate({// //起不到作用 #000079// backgroundColor:'#FF0000',// //用透明度的话，字体跟着变淡了，字体是要求不变的// opacity:0.2// },500);// });// $('#mao').mouseout(function(){// $(this).animate({// backgroundColor:'#000079',// opacity:1// },500);// });// $('.mainContent ul li').mouseover(function(){ $(this).animate({ //起不到作用 backgroundColor:'blue', //用透明度的话，字体跟着变淡了，字体是要求不变的 opacity:0.2 },500); }); $('.mainContent ul li').mouseout(function(){ $(this).animate({ backgroundColor:'#0072E3', opacity:1 },500); }); }) </script></head><body> <div class="mainContent"> <ul> <li id="mao">首页</li> <li>系统配置</li> <li>系统管理</li> <li>退出</li> </ul> </div></body></html>