jQuery Color Animations颜色动画插件
source link: https://blogread.cn/it/article/4344?f=hot1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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/
建议继续学习：
扫一扫订阅我的微信号：IT技术博客大学习
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK