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