控制animate.css动画的jquery插件


源码介绍

简要教程

jquery.animator.js是一款基于animate.css的jquery动画插件。Animator插件可以为DOM元素提供各种animate.css中设定的CSS3动画,并额外提供当DOM元素进入视口时触发CSS3动画的方法。

使用方法

在页面中引入jquery和jquery.animator-beta.min.js文件,以及animate.css样式文件。

<link href="path/to/css/animate.css" rel="stylesheet">
<script src="path/to/js/jquery.min.js"></script>
<script src="path/to/js/jquery.animator-beta.min.js"></script>          
                
使用插件

要为一个目标DOM元素设置动画效果,可以简单的使用下面的jquery代码。

$('#target-elem').addAnimation('lightSpeedIn',500);
                

其中lightSpeedIn是animate.css中设定的CSS3动画名称。

如果需要在元素进入视口时,触发指定的CSS3动画,可以使用下面的代码:

if($('#target-elem').isOnScreen()){
  $('#target-elem').addAnimation('lightSpeedIn');
}                  
                

你也可以将DOM元素上指定的动画移除:

$('#ele').removeAnimation('lightSpeedIn');                  
                

jquery.animator.js-jquery动画插件的github地址为:https://github.com/zugoripls/jquery.animator



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部