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 ...
随机推荐
- Mac上git的安装配置与使用简述
Mac下git搭建及使用 之前就只是经常在GitHubs上下载代码,也没注意怎么上传项目.一开始对git都没什么了解花了几个小时去小补了下知识.如果有需要可以转去这里学习:[GIT使用简易指南] (h ...
- 转-JS子窗口创建父窗口操作父窗口
Javascript弹出子窗口 可以通过多种方式实现,下面介绍几种方法 (1) 通过window对象的open()方法,open()方法将会产生一个新的window窗口对象 其用法为: window ...
- python 参数
摘自:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00137473844933 ...
- JS实现Ajax---例:获取服务器时间
Ajax在本质上是一个浏览器端的技术 XMLHttpRequest XMLHttpRequest对象 XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同. 简而言之:它可以异步 ...
- C# 全角符号转半角
public static string SBCCaseToNumberic(string SBCCase) { char[] c = SBCCase.ToCharArray(); ; i < ...
- du 命令
Linux du命令也是查看使用空间的,但是与df命令不同的是Linux du命令是对文件和目录磁盘使用的空间的查看,还是和df命令有一些区别的. 1.命令格式: du [选项][文件] 2.命令功能 ...
- 【转】HTTP长连接与短连接
1. HTTP协议与TCP/IP协议的关系 HTTP的长连接和短连接本质上是TCP长连接和短连接.HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议.IP协议主要解决网络路由和寻址问 ...
- 【poj1080】 Human Gene Functions
http://poj.org/problem?id=1080 (题目链接) 题意 给出两个只包含字母ACGT的字符串s1.s2,可以在两个字符串中插入字符“-”,使得s1与s2的相似度最大. Solu ...
- [NOIP2011] 提高组 洛谷P1311 选择客栈
题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均 ...
- IM通信协议逆向分析、Wireshark自定义数据包格式解析插件编程学习
相关学习资料 http://hi.baidu.com/hucyuansheng/item/bf2bfddefd1ee70ad68ed04d http://en.wikipedia.org/wiki/I ...