控制animate.css动画的jquery插件

当前位置:主页 > jQuery库 > 工具类 > 控制animate.css动画的jquery插件
控制animate.css动画的jquery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-03-23
    阅读:
麦子学院
简要教程

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

网友评论