jquery.color.js的使用
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的使用的更多相关文章
- jquery.color.js
经过测试,可以使用. 2016-12-22 21:39:45 /*! * jQuery Color Animations v2.1.2 * https://github.com/jquery/jqu ...
- jQuery---jquery.color.js和jquery.lazyload.js的使用
jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"> ...
- jquery.jCal.js显示日历插件
描述:日历插件jCal用于需要输入日期的表单文本框. 兼容浏览器:IE浏览器/Firefox/Google Chrome 官方链接: http://www.overset.com/2008/05/1 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- 初探jquery.slimscroll.js和iscroll5.js
网上关于实现各种滚动效果的插件不胜枚举,这里,我简单介绍一下自己用过的两款比较有代表性的插件: 1.jquery.slimscroll.js,需要先引入jquery类库,主要用于模拟传统的浏览器滚动条 ...
- 用jquery.pager.js实现分页
1.html <link href="/stylesheets/Pager.css" rel="stylesheet" type="text/c ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
随机推荐
- UIView CALayer 的区别
UIView与CALayer的区别,很详细 研究Core Animation已经有段时间了,关于Core Animation,网上没什么好的介绍.苹果网站上有篇专门的总结性介绍,但是似乎原理性的东西不 ...
- 类中实现 Dispose And Finalize
1.Dispose方法中,应该使用GC.SuppressFinalize防止GC调用Finalize方法,因为显示调用Dispose比较好. 2.Disposed字段保证了两次调用Dispose方法不 ...
- 决绝Capturing 'demo' strongly in this block is likely to lead to a retain cycle
- (IBAction)onTest:(id)sender { BlockDemo *demo = [[BlockDemo alloc]init]; __weak typeof(BlockDemo) ...
- Xn数列（codevs 1281）
题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入 ...
- Stanford大学机器学习公开课（二）：监督学习应用与梯度下降
本课内容: 1.线性回归 2.梯度下降 3.正规方程组 监督学习:告诉算法每个样本的正确答案,学习后的算法对新的输入也能输入正确的答案 1.线性回归 问题引入:假设有一房屋销售的数据如下: 引 ...
- 面向对象的小demo
两个类如下 package cao.com.duixiang; import java.util.Arrays; public class OtherTest { //求max public int ...
- 4.1 pair类模板
在学习关联容器之前,首先先要了解一下STL中的pair类模板,因为关联容器的一些成员函数返回值都是pair对象,而且map 和multimap中的元素都是pair对象. 1)pair类模板定义 pai ...
- haproxy 安装 各个参数的测试
---------------------------------------------------------------------------------------------------- ...
- 趣味C++
用三段 140 字符以内的代码生成一张 1024×1024 的图片 Kyle McCormick 在 StackExchange 上发起了一个叫做TweetableMathematical A ...
- sdut 2441 屠夫与狼
屠夫和狼 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...