简介

Jquery本身不支持变色，Jquery Color.js弥补了这缺陷并为animate动画赋予变色效果， 它是一款辅助颜色动画效果的JQuery插件，彩色动画插件制作文字悬停彩色渐变动画过渡效果，背景悬停彩色渐变动画过渡效果两种文字背景悬停彩色渐变动画导航条效果。

（下载的附件中附有DEMO）

使用

1.  引入 jquery.js 和 jquery.color.js 文件

2  HTML

<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">项目案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

CSS
/* menu */
#menu{margin:20px auto;width:400px;height:40px;}
#menu ul li{float:left;padding-left:10px;}
.first a{font-family:"微软雅黑","宋体";font-size:18px;color:#fff;text-decoration:none;background:#303030;padding:5px;float:left;display:block;}

3.  调用

<script type="text/javascript">
$(document).ready(function(){
$(".first a").hover(function(){
$(this).animate({
backgroundColor:"#00aadd"
}, 600);
},function(){
$(this).animate({
backgroundColor:"#303030"
},400);
});
});
</script>

相关链接

GitHub 地址 ：https://github.com/jquery/jquery-color

bootCDN 下载地址 ：https://www.bootcdn.cn/jquery-color/