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

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

[code=”html”]

测试元素

[/code]

我们写一行这样的代码:

[code=”javascript”]

$(“#test”).animate({“backgroundColor”:”#FF3300″,”height”:200},5000);

[/code]

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

再看一下API:https://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页面:https://www.css88.com/demo/Color_Animations/

更多阅读:

http://jquery.offput.ca/highlightFade/

http://www.bitstorm.org/jquery/color-animation/

 

赞(0) 打赏
未经允许不得转载:WEB前端开发 » [jQuery插件] jQuery Color Animations颜色动画插件

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    感谢分享了阿

    裂帛7年前 (2011-09-20)回复
  2. #-48

    刚还在想背景色的动画效果怎么实现就发现这文章了~感谢楼主

    牛奶精神7年前 (2011-09-29)回复
  3. #-47

    一直在使用这个插件,一般用在提醒上边,比如发表评论时,有必选项未填时、使用AJAX发完评论后的进行高亮闪烁。
    当然感谢你分享出来让更多的人使用。

    Karson7年前 (2011-10-12)回复
  4. #-46

    有背景图片的动画没?

    设计蜂巢7年前 (2011-10-13)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏