jQuery Color Animations颜色动画插件
jQuery的animate方法对颜色无法做动画效果,例如有个test元素:
<div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>
我们写一行这样的代码:
$("#test").animate({"backgroundColor":"#FF3300","height":200},5000);
我们可以看到test元素高度会缓慢的变小,而该元素的背景颜色却毫无变化,假设你去对边框做颜色变化的动画效果,也是无法实现的。
再看一下API:http://www.css88.com/jqapi/#p=animate
所有用于动画的属性必须是数字的(除了如下所示);这些属性如果不是数字的将不能使用基本的jQuery功能。(举个例子,width
, height
或者left
可以执行动画,但是background-color
不能。)属性值被当作一个像素单位的数字,除非另有说明。单位em
和 %
需要指定使用。就是说color,background-color,border-left-color等等这些颜色属性是不能执行动画效果的。
jQuery ui中Effects有一个Color Animation效果(见:http://jqueryui.com/demos/animate/)这里分明能改变文本颜色和背景颜色,看了一下jquery.effects.core.js这个源码,并且抽出源码,改了一个jQuery Color Animations颜色动画插件,对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。
见demo页面:http://www.css88.com/demo/Color_Animations/
更多阅读:
http://jquery.offput.ca/highlightFade/
http://www.bitstorm.org/jquery/color-animation/
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46524)
- 50个活力和动感的网页设计-颜色的灵感 (阅读:32923)
- 分享一个JQUERY颜色选择插件 (阅读:12655)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9688)
- colortail,让 tail 命令绚丽起来 (阅读:8775)
- 色轮,用科学解释艺术 (阅读:8814)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7758)
- jQuery的data()方法 (阅读:7588)
- jQuery性能优化指南 (阅读:7331)
- 颜色的代码表达式 (阅读:6516)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:愚人码头 来源: WEB前端开发
- 标签: jQuery 动画 插件 颜色
- 发布时间:2011-09-18 17:28:04
- [51] Oracle MTS模式下 进程地址与会话信
- [49] 图书馆的世界纪录
- [49] IOS安全–浅谈关于IOS加固的几种方法
- [49] 如何拿下简短的域名
- [45] android 开发入门
- [44] 【社会化设计】自我(self)部分――欢迎区
- [42] 界面设计速成
- [42] 读书笔记-壹百度:百度十年千倍的29条法则
- [41] 视觉调整-设计师 vs. 逻辑
- [40] Go Reflect 性能