jQuery backgroundColor的animate效果
我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。
animate一般只支持大小,位置,透明度的变化
今天看到新浪微博在微博发布框无内容时,点击发布按钮,发布框会有背景颜色闪烁,产生警示的效果,友好的用户体验就想模仿一下。
于是又纠结了一天。。。
刚开始我用jQuery的fadeIn和fadeOut,很快的就能达到效果。但是我发现,微博那里是逐渐地改变背景颜色实现的,而fadeIn跟fadeOut是通过逐渐改变alpha即透明度实现。所以开始纠结中。。
然后,写了段代码
var color = function(){};
color.fadeIn = function(a){
if(a>=255){
$('#input').css('backgroundColor', 'gba('+a+','+a+','+a+')');
a++;
setTimeout(color.fadeIn(a), 20);
} else {
setTimeout(color.fadeOut(a), 20);
}
}
color.fadeOut = function(a){
// 此处省略
}
简单说,我是想实现,比如rgb(a, a, a)递增至rgb(255, 255, 255) 再递减至 rgb(a, a, a)
但是效果差很多,一测试颜色没变化。
于是,打了一段测试代码
setTimeout($('#input').css('backgroundColor', 'red'), 1000);
setTimeout($('#input').css('backgroundColor', 'black'), 2000);
打开浏览器,直接就是黑色,并没有从红色跳到黑色。
。。。
后来 找到jQuery的一个插件叫jquery.color.js里面重写了backgroundColor,color,boderColor等属性颜色的animate效果
于是问题可以这样解决 :
$('#input').animate({backgroundColor:'red'}, 1000);
这样就可以从原始的背景颜色逐渐变成红色的效果。
很神奇啊,开始研究jquery.color.js的源代码。
先附上用jquery.color.js实现的颜色闪烁的警示效果代码
$('.publish a').click(function(){
var content = $('textarea').val();
if(content==""){
$('#input').stop(false, true).animate({backgroundColor:'#FF9966'}, 250)
.animate({backgroundColor:'#FFF'}, 200)
.animate({backgroundColor:'#FF9966'}, 250)
.animate({backgroundColor:'#FFF'}, 200);
} else {
$.post(url, {input:content},function(data){
});
}
});
jQuery backgroundColor的animate效果的更多相关文章
- jquery Jquery 遍历 获取设置 效果
speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...
- js进阶 13-4 jquery自定义动画animate()如何使用
js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...
- Jquery如何使用动画效果改变背景色
Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...
- jQuery实现模拟滚动条效果;
滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- jquery实战---标签页效果
在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- jQuery弹出层效果
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...
随机推荐
- struts2支持的结果类型
在struts2-core.jar/struts-default.xml中,我们可以找到关于result-type的一些配置信息,从中可以看出struts2组件默认为我们提供了这 些result-ty ...
- 使用GitHub进行团队合作
原文: Team Collaboration With GitHub GitHub已经成为的一切开放源码软件的基石.开发人员喜欢它,基于它进行协作,并不断通过它开发令人惊叹的项目.除了代码托管,G ...
- HashMap 和 HashTable区别
HashMap 非线程安全的 HashTable线程安全的 package Collections.Map; import java.util.HashMap; public class HashMa ...
- Tomcat+eclipse JSP windows开发环境配置
一.安装Java SE http://www.oracle.com/technetwork/java/javase/downloads/index.html ,配置JAVA_HOME环境变量 二.安装 ...
- Java基础-数据类型int,short,char,long,float,double,boolean,byte
Java语言是静态类型的(statical typed),也就是说所有变量和表达式的类型再编译时就已经完全确定.由于是statical typed,导致Java语言也是强类型(Strong typed ...
- BZOJ2121 字符串游戏
Description BX正在进行一个字符串游戏,他手上有一个字符串L,以及其 他一些字符串的集合S,然后他可以进行以下操作:对于一个在集合S中的字符串p,如果p在L中出现,BX就可以选择是否将其删 ...
- [NOIP2011] 提高组 洛谷P1314 聪明的质监员
题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...
- Ubuntu学习总结-01 用VMware 8安装Ubuntu 12.04详细过程
1 Ubuntu 下载地址 http://www.ubuntu.com/download/desktop 2 安装Ubuntu 转载用VMware 8安装Ubuntu 12.04详细过程 http:/ ...
- .NET/MVC-发布到IIS6.1提示未能加载程序集System.Web.Http.WebHost
http://www.bubuko.com/infodetail-1128065.html vs2013发布后,自己的用iis7.0可以发布这个网站,但是用服务器2008 IIS6.1发布这个网站一直 ...
- jQuery.cookie.js
一.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件. 下载:http://github.com/carhartl/jquery-cookie/zipball/v1.4.1 特别 ...