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 双向many-to-many 业务模型: 描述员工和项目 一个员工同时可以参与多个项目 一个项目中可以包含多个员工 分析:数据库的数据模型,通过中间关系表,建立两个one-to-many构成man ...

  2. mysql my.cnf配置文件详解

    本配置文件针对Dell R710,双至强E5620.16G内存的硬件配置.CentOS 5.6 64位系统,MySQL 5.5.x 稳定版.适用于日IP 50-100w,PV 100-300w的站点, ...

  3. Mysql 全文索引

    1创建一个带全文索引的表: 2查看表结构: 3,使用:SEELCT * FROM XXXX WHERE MATCH(FIELD) AGAINST ('...'); 注意:FULLTEXT,在检索时不区 ...

  4. debug与release

    因为在Debug中有ASSERT断言保护,所以要崩溃,而在Release优化中就会删掉ASSERT,所以会出现正常运行. void func() {    char b[2]={0};    strc ...

  5. hdu 1005

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1005 思路:找规律题 #include<stdio.h> main() { ]; int ...

  6. 四、优化及调试--网站优化--Yahoo军规上

    什么是Yahoo军规?即如何提高网站速度的知识. 具体如下: 1.尽量减少HTTP请求个数——须权衡 什么是http请求:从客户端到服务器端的请求消息.包括消息首行中,对资源的请求方法,资源的标识符及 ...

  7. Android4.4 以太网和DHCP启动过程介绍

    转自:http://blog.csdn.net/wlwl0071986/article/details/51451843 Android4.4已经加入了以太网的支持.现在对以太网的初始化流程.网络策略 ...

  8. SQL的一切常用函数展示

    练习了一下, 用时再慢慢看吧. SHOW WARNINGS; SELECT quote(text_fld) FROM string_tbl; ), 'n'); SELECT ASCII('ö'); S ...

  9. [Spring] 事务级别定义

    记录下来,以后备用 //事务传播属性 @Transactional(propagation=Propagation.REQUIRED)//如果有事务,那么加入事务,没有的话新创建一个 @Transac ...

  10. Visual Studio 2015将在7月20号RTM

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:用了3个多月的VS 2015终于要迎来RTM了,不过感觉有点淡淡的忧伤(为什么呢?请看 ...