jQuery的animate关于导航菜单背景色渐近渐出的有关问题
jQuery的animate关于导航菜单背景色渐近渐出的问题
我想做个导航菜单(默认的背景色为白色),当鼠标移上去的时候,背景色变为红色且以动画的形式渐渐的淡入,当鼠标移开之后,背景色渐渐的淡出,变为白色,我用jQuery的animate好像达不到效果,希望大家能帮我指点下,先谢谢啦!
------解决方案--------------------
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://*.com/questions/190560/jquery-animate-backgroundcolor
增加了一个jquery.color.js插件,这个插件的地址是
https://github.com/jquery/jquery-color
https://github.com/jquery/jquery-color
然后你要的效果就有了,一下是我的测试的代码,背景色可以改变
我想做个导航菜单(默认的背景色为白色),当鼠标移上去的时候,背景色变为红色且以动画的形式渐渐的淡入,当鼠标移开之后,背景色渐渐的淡出,变为白色,我用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://*.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>