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

我想做个导航菜单(默认的背景色为白色)，当鼠标移上去的时候，背景色变为红色且以动画的形式渐渐的淡入，当鼠标移开之后，背景色渐渐的淡出，变为白色，我用jQuery的animate好像达不到效果，希望大家能帮我指点下，先谢谢啦！<!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>

解决方案 »

  1.   

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

  2.   

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    在它后面再加载：jquery的UI库文件:可能是这个名字jquery-ui.min.js，也有可能加了版本号的。你应该有的了
      

  3.   


    ++ 
    lz可以参考这个链接 http://www.w3school.com.cn/jquery/effect_animate.asp
      

  4.   

    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然后你要的效果就有了，一下是我的测试的代码，背景色可以改变<!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>