jQuery插件] jQuery Color Animations颜色动画插件

jQuery的animate方法对颜色无法做动画效果,例如有个test元素:

1 <div id="test" style="border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF"> 测试元素</div>

我们写一行这样的代码:

1 $("#test").animate({"backgroundColor":"#FF3300","height":200},5000);

我们可以看到test元素高度会缓慢的变小,而该元素的背景颜色却毫无变化,假设你去对边框做颜色变化的动画效果,也是无法实现的。

再看一下API:http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的(除了如下所示);陶瓷茶具价格这些属性如果不是数字的将不能使用基本的jQuery功能。(举个例子,widthheight或者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://www.zuipin.cn/chaju/taocichaju.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值