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. mysql探究之null与not null

    相信很多用了mysql很久的人,对这两个字段属性的概念还不是很清楚,一般会有以下疑问: 1.我字段类型是not null,为什么我可以插入空值 2.为毛not null的效率比null高 3.判断字段 ...

  2. 执行HQL语句出现Remember that ordinal parameters are 1-based

    今天使用hibernate出个奇怪的错误,第一次碰到 Remember that ordinal parameters are 1-based! 原因是 问题发生的原因是:hql语句里不需要参数,却添 ...

  3. Qt 安装一个Service

    QString command = "sc create YourServiceName binPath= \""+application_path+"\&qu ...

  4. [Android Pro] app_process command in Android

    reference to : http://blog.csdn.net/wangkaiblog/article/details/46050587 本来以为存放在/systen/bin/下的monkey ...

  5. rabbitmq_config

    https://github.com/rabbitmq/rabbitmq-server/blob/stable/docs/rabbitmq.config.example   %% ---------- ...

  6. mybatis 学习！

    参考链接 http://www.mybatis.org/spring/zh/mappers.html http://www.cnblogs.com/fangjian0423/p/spring-myba ...

  7. 菜鸟学Linux命令:端口查看和操作命令

    >>端口和进程 端口不是独立存在的,它是依附于进程的.某个进程开启,那么它对应的端口就开启了,进程关闭,则该端口也就关闭了.下次若某个进程再次开启,则相应的端口也再次开启. >> ...

  8. 基于python网络编程实现支持购物、转账、存取钱、定时计算利息的信用卡系统

    一.要求 二.思路 1.购物类buy 接收 信用卡类 的信用卡可用可用余额, 返回消费金额 2.信用卡(ATM)类 接收上次操作后,信用卡可用余额,总欠款,剩余欠款,存款 其中: 1.每种交易类型不单 ...

  9. 扩展LV

    LVM最大的特性就是可以弹性调整磁盘容量下面扩展一个已经存在的LV [root@ol6--rac1 mnt]# lvdisplay --- Logical volume --- LV Path /de ...

  10. AIX RAC ORA-27504 ORA-27300 ORA-27301 ORA-27302 ORA-27303

    操作系统:AIX6.1  数据库:Oracle10.2.0.5 RAC 2个节点.其中一个节点正常,另外一个节点的instance的状态是offline的,手工去启动的时候报错: ORA: IPC e ...