jQuery的animate方法对颜色无法做动画效果,例如有个test元素:
[code=”html”]
[/code]
我们写一行这样的代码:
[code=”javascript”]
$(“#test”).animate({“backgroundColor”:”#FF3300″,”height”:200},5000);
[/code]
我们可以看到test元素高度会缓慢的变小,而该元素的背景颜色却毫无变化,假设你去对边框做颜色变化的动画效果,也是无法实现的。
再看一下API:https://www.7psus5.com/jqapi/#p=animate
所有用于动画的属性必须是数字的(除了如下所示);这些属性如果不是数字的将不能使用基本的jQuery功能。(举个例子,width
,?height
或者left
可以执行动画,但是background-color
不能。)属性值被当作一个像素单位的数字,除非另有说明。单位em
?和?%
需要指定使用。就是说color,background-color,border-left-color等等这些颜色属性是不能执行动画效果的。
jQuery ui中Effects有一个Color Animation效果(见:)这里分明能改变文本颜色和背景颜色,看了一下jquery.effects.core.js这个源码,并且抽出源码,改了一个jQuery Color Animations颜色动画插件,对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。
见demo页面:https://www.7psus5.com/demo/Color_Animations/
更多阅读:
感谢分享了阿
刚还在想背景色的动画效果怎么实现就发现这文章了~感谢楼主
一直在使用这个插件,一般用在提醒上边,比如发表评论时,有必选项未填时、使用AJAX发完评论后的进行高亮闪烁。
当然感谢你分享出来让更多的人使用。
有背景图片的动画没?