jquery颜色动画插件jquery.colorAnimations.js

所属分类:其他-动画效果

 52681  297  查看评论 (4)
分享到微信朋友圈
X
jquery颜色动画插件jquery.colorAnimations.js ie兼容8

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>


相关插件-动画效果

2013圣诞快乐礼盒破裂HTML5特效

圣诞节快乐,盒子破裂弹出。
  动画效果
 40573  482

jQuery css3手机页面转换动画特效

jQuery css3手机页面转换动画特效
  动画效果
 40762  452

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 39666  300

五种常用的Loading动效

基于jquery和css的简单五种Loading样式,易用,可扩展
  动画效果
 46238  315

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    我的名字叫袁涛i 0
    2017/11/17 16:04:41
    调用方式复杂了 回复
    天涯漂 0
    2017/10/25 11:42:21
    路灯下ㄉ那首歌 0
    2017/5/6 10:21:04
    Legend 0
    2014/12/19 15:47:05
    这个可以兼容ie6的吧 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复