jQuery的animate关于导航菜单背景色渐近渐出的有关问题

2012-10-18

jQuery的animate关于导航菜单背景色渐近渐出的问题我想做个导航菜单(默认的背景色为白色)，当鼠标移上去的

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，也有可能加了版本号的。你应该有的了
[解决办法]

探讨
animate（）对color是无效的，只能设置一个height,width，opacity几个常用的。

[解决办法]
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>

热点排行