我们知道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效果的更多相关文章

  1. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  2. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  3. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  4. jQuery实现模拟滚动条效果;

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  5. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  6. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  7. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  8. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  9. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

随机推荐

  1. c++重载运算符注意

    c++重载运算符的时候加&或不加: 如果加了&表示引用,说明用的都是同一块内存.如果不加,那么用的就是一份拷贝,即不同的内存. 一般连续操作的时候要加&. 可以重新定义一个对象 ...

  2. 【kAri OJ 616】Asce的树

    时间限制 1000 ms 内存限制 65536 KB 题目描述 作为一个东北大老爷们,大A熊以力气大著称,现在有一颗半径为r的树,剖面图如黑色的圆,大A熊决定搬几个半径为R的圆柱形桶将其围住,剖面图如 ...

  3. 【前端学习】git命令行界面

    学习目标:掌握git命令行界面的操作.掌握最基本的clone add commit push pull操作. 先下载客户端:http://github-windows.s3.amazonaws.com ...

  4. 【HDU 5387】Clock

    题 Description Give a time.(hh:mm:ss),you should answer the angle between any two of the minute.hour. ...

  5. Myeclipse快捷键的使用

    存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shi ...

  6. Eclipse启动Tomcat错误:Several ports (8005,8009) required by Tomcat v6.0 Server at localhost are already

    解决办法: 1.netstat -aon|findstr 8005 可查看指定端口号使用情况 2.tasklist |findstr 10452 找出占用指定进程Id的程序 3.taskkill /p ...

  7. shell与变量的声明的操作

    1.给命令起别名:alias 执行下面命令后,可以使用dir代替ls –l 命令,显示目录中的文件详细信息: 还可以用一个别名表示几个命令 的结合: 2.ps:显示当前登录会话的所有活动进程: 3.更 ...

  8. emmet使用 及 notepadd++ emmet的安装

    emmet的使用的参考文章:http://www.cnblogs.com/sussski/p/3544744.html html:4s.html:4t.html:5或! +.>.^:层次 *.@ ...

  9. iphone6 wifi自动断开 tplink

    这样设置就好了,不会自动断开 了

  10. jquery设置和获得checkbox选中问题

    1.设置checkbox选中: //选中多选框 checkbox=$("#agentinfo input[name='veri[]']"); //循环多选框中的值 checkbox ...