Jquery本身不支持变色，Jquery Color.js弥补了这缺陷并为animate动画赋予变色效果，如下红变蓝后执行回调再由蓝变红。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        #box {

            width:100px;

            height:100px;

            background-color:red;

            cursor:pointer;

        }

    </style>

</head>

<body>

    <div class="box" id="box"></div>

    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="/js/jquery.color.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#box").mouseenter(function () {

                $(this).stop(true, true).animate({ "backgroundColor": 'blue' }, 5400, function () {

                    $(this).animate({ "backgroundColor": 'red' }, 5400);

                });

            });

        });

    </script>

</body>

</html>

支持的其他属性如下

backgroundColor, borderBottomColor, borderLeftColor, borderRightColor, borderTopColor, color, columnRuleColor, outlineColor, textDecorationColor, textEmphasisColor

jquery.color.js的使用的更多相关文章

  1. jquery.color.js

    经过测试,可以使用. 2016-12-22  21:39:45 /*! * jQuery Color Animations v2.1.2 * https://github.com/jquery/jqu ...

  2. jQuery---jquery.color.js和jquery.lazyload.js的使用

    jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"> ...

  3. jquery.jCal.js显示日历插件

    描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. 初探jquery.slimscroll.js和iscroll5.js

    网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...

  6. 用jquery.pager.js实现分页

    1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  9. jquery.validate.js表单验证

    一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...

随机推荐

  1. Hibernate单向一对多对象关系模型映射

    1 hibernate 的对象关系映射 Orm: 类-----表 属性------字段 对象------记录 表:在数据库中存在主外键的关系,反向工厂类是由表生成,在由表生成类的时候,类和类之间存在者 ...

  2. C --gettimeofday===获取某个程序经历的时间

    #include <stdio.h> #include <sys/time.h> #include <time.h> int gettimeofday(struct ...

  3. js 闭包原理理解

    问题?什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 很显然 ...

  4. kvm 下运行的　WINWS7磁盘空间不足　增加磁盘　实战(这个有问题，还未解决)

    创建一个新硬盘: [root@NB vhost]# qemu-img create -f qcow2 add_win_desk.img 5G Formatting encryption=off clu ...

  5. SQLServer子查询

    in谓词子查询 select * from dbo.Worker where did in (select dID from DepartMent) 比较运算子查询 select * from Wor ...

  6. ArchLinux 安装笔记：续 --zz

    续前话 在虚拟机里调试了几天,终于鼓起勇气往实体机安装了,到桌面环境为止的安装过程可以看我的前一篇文章<ArchLinux 安装笔记>.桌面环境我使用的是 GNOME,虽然用了很长一段时间 ...

  7. 查看MYSQL中数据表占用的空间

    由于数据太大了.所以MYSQL需要瘦身,那前提就是需要知道每个表占用的空间大小. 首先打开指定的数据库: use information_schema; 如果想看指定数据库中的数据表,可以用如下语句: ...

  8. 【计算机图形学】openGL常用函数

    OpenGL常用函数   glAccum 操作累加缓冲区   glAddSwapHintRectWIN 定义一组被 SwapBuffers拷贝的三角形   glAlphaFunc允许设置alpha检测 ...

  9. Java Hour 62 J2EE App 服务器

    目前略微瓶颈了,准备换工作. tomcat.weblogic.jboss的区别,容器的作用 Apache 是一个http 服务器. Tomcat 是一web 应用程序服务器,支持部分的j2ee. Jb ...

  10. Oracle性能优化

    (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE的解析器按照 从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最 ...