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

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

 52831  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>


相关插件-动画效果

基于jQuery实现的数字滚动插件(原创)

实现过程简单,支持设置总时长、总数以及运动的形式,本插件基于jQuery的animate方法,简单易懂,方便使用
  动画效果
 30158  338

步骤填写表单

美观的填写表单界面
  动画效果
 48629  411

非常简单好用的一个数字滚动插件countUP

通过给JQuery 添加方法,可以定义小数点前后显示位数,数字后面是否显示%或者其他符号,并带有回调函数。
  动画效果
 67289  426

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 37289  319

讨论这个项目(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的吧 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复