jQuery的animate关于导航菜单背景色渐近渐出的有关问题-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20382 次

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;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>