jquery的animate方法可以自定义动画,但是,只能针对数字类型的属性,如大小,高度,透明度等。
对于非数字类型如颜色,则不支持动画。所以,需要自行处理。
jqueryui 中增加个这个支持,可以供我们使用。
如果,只是需要颜色动画,可以不必要加载所有的jqueryui 文件。只需要它的一部分。
有高人将其独立出来了。
jquery.colorAnimations.js
只需要加载这个文件,就可以使用颜色的动画效果了。
示例:
实现闪烁的效果。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.colorAnimations.js"></script> <div> <a href="javascript:void(0);" id="button">点击这里</a></div> <textarea name="detail" cols="60" rows="5" id="detail"></textarea> <script type="text/javascript"> $("#button").click( function(){ flash(2,200); } ); function flash(total,speed) { total --; if(total >= 0 ) { $("#detail").animate({backgroundColor: "rgb(250,128,114)" }, speed, function(){ $("#detail").animate({backgroundColor: "rgb(255,255,255)" }, speed,function(){flash(total,speed);}); } ); } } </script>