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. 使用连发互联空间+SQLyog 设置我们的数据库链接

    在我使用SQLyog(小海豚)管理我的数据库的时候,主机空间为连发互联的(自己做着玩,这个便宜),遇到一些坑,自己写一下记录一下,省的下次忘记了又浪费时间. 首先你要有连发互联的空间,可以淘宝购买,连 ...

  2. express响应前端ajax请求

    后端其实并不需要知道前端发起的请求是不是ajax,后端只需要响应请求即可.例子: 前端这样写: $('button').on('click', function(event) { event.prev ...

  3. 3ds max删除了对象后，还是将原来所有对象输出的原因

    原因是场景中除了 几何体 外还有 图形,如下图 将这些图形删除,几何体就都正常输出了.

  4. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  5. 通过mysql命令行理解mysql

    引言:工具不可谓给我们的生活带来了便利,但有些时候我们却忘记了事物本身的意义.在大多数人都在追捧甚至是盲从各种各样的工具有多先进的时候,你是否有反思过:你目前是否有使用它的资格. 假设你学会了使用一款 ...

  6. Scrapy爬取美女图片 (原创)

    有半个月没有更新了,最近确实有点忙.先是华为的比赛,接着实验室又有项目,然后又学习了一些新的知识,所以没有更新文章.为了表达我的歉意,我给大家来一波福利... 今天咱们说的是爬虫框架.之前我使用pyt ...

  7. WPF控件

    1:内容控件(Content Controls)2:条目控件(Items Controls)3:文本控件(Text Controls)4:范围控件(Range Controls) 一:内容控件 内容控 ...

  8. C#关键字params

    using System; using System.Threading; namespace Test { /// <summary> /// params用法: 1.用来修饰方法的参数 ...

  9. 23.备忘录模式(Memento Pattern)

    using System; using System.Collections.Generic; namespace ConsoleApplication6 { /// <summary> ...

  10. 声明replicated属性之后我编译不通过的问题