当前位置:JS特效 » 其他 » 控制animate.css动画的jquery插件
 控制animate.css动画的jquery插件
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:60
简要教程

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

使用方法

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



          
                
使用插件

要为一个目标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

Top