建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

支持颜色动画处理的JQuery插件jquery.color.js

来源:易助科技网浏览量:8收藏

简介


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/