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. php date函数 参数详细

    time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计算, 要找出前一天的时间就是 time()-60*60*24; 要找出前一年的时间就 ...

  2. Mac 安装 eclipse

    总是看着安卓的代码感觉手痒痒,闲来无事在 Mac 端安装了一下eclipse 提高逼格. 1.官网(http://www.eclipse.org/downloads/)下载所需的安装包,具体步骤如图: ...

  3. c语言强制类型转换

    一.强制类型转换 printf("3/2+100.5=%f",3/2+100.5);//100.5错误表达 printf ("    (float)3/(float)2 ...

  4. Oracle读写分离架构

    读写分离是架构分布式系统的一个重要思想.不少系统整体处理能力并不能同业务的增长保持同步,因此势必会带来瓶颈,单纯的升级硬件并不能一劳永逸.针对业务类型特点,需要从架构模式上进行一系列的调整,比如业务模 ...

  5. NYOJ题目893十字架

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAQRCAIAAACl4dlPAAAgAElEQVR4nO3dO1Ljyv834P8myFkIsR

  6. Loadrunner之HTTP接口测试脚本实例

    接口测试的原理是通过测试程序模拟客户端向服务器发送请求报文,服务器接收请求报文后对相应的报文做出处理然后再把应答报文发送给客户端,客户端接收应答报文结果与预期结果进行比对的过程,接口测试可以通过Jav ...

  7. js 倒计时点击和当前时间

    <input id="btn" type="submit" value="确定" disabled="disabled&qu ...

  8. 【JAVA多线程概述】

    一.多线程概述 一个进程中至少有一个线程,每一个线程都有自己运行的内容,这个内容可以称为线程要执行的任务. 不能没一个问题都使用多线程,能使用单线程解决的问题就不要使用多线程解决. 使用多线程的弊端: ...

  9. I-number

    以下是真坑爹题目: 此题必须输出前导零,否则永远a不了 I-number Time Limit: 5000MS Memory limit: 65536K 题目描述 The I-number of x ...

  10. 攻城狮在路上（叁）Linux（十五）--- 文件与目录的默认权限与隐藏权限

    一.文件默认权限:umask <==需要被减去的权限. 1.umask指的是当前用户在新建文件或者目录时的默认权限,如0022; 2.默认情况下,用户创建文件的最大权限为666; 创建目录的最大 ...