基于Animate.css的jQuery动画特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

janimate是一款非常实用的基于Animate.css的jQuery动画特效插件。该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果。通过该插件可以简化Animate.css的使用，非常方便。

安装

可以通过bower或npm来安装janimate动画特效插件。

bower install jquery-janimate
npm install janimate

你也可以通过CDN节点来引用这个jQuery动画特效插件。

<script src="https://cdn.rawgit.com/renatorib/janimate/master/dist/janimate.min.js"></script>

使用方法

该插件依赖于jQuery和Animate.css，使用时要先引入这些依赖文件。

<link rel="stylesheet" href="https://cdn.rawgit.com/daneden/animate.css/master/animate.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/janimate.min.js"></script>

调用插件

在页面加载完毕之后，可以通过jQuery选择器来选择你想要进行动画的元素，然后调用jAnimate()或jAnimateOnce()方法，并传入你想要执行动画效果的名称即可。动画名称可以在这里查询。

$(document).ready(function(){
  $('.e1').click(function(){
    $('#title').jAnimateOnce('swing');
  });
  $('.e3').click(function(){
    $('#title').jAnimate('flip');
  });
});

jAnimate和jAnimateOnce的区别

jAnimateOnce()方法在动画结束时会清除动画的class，意思是你在执行完一次动画效果之后将回归到正常样式。jAnimate()方法则是在动画结束后任然保留这些动画的class。

方法

jAnimate提供了三个可用的方法：

jAnimate(effect, callback)：为指定的选择器元素执行effect动画，并在动画结束后执行回调函数。
```
$(selector).jAnimate(effect, callback);                
              
```
jAnimateOnce(effect, callback)：为指定的选择器元素执行effect动画，动画结束后清除动画的class，并执行回调函数。
```
$(selector).jAnimateOnce(effect, callback);
```
$(selector).jAnimateSequence(arrayOfEffects, callback);：依次执行arrayOfEffects参数中的所有动画效果，并在所有动画执行结束后执行回调函数。
```
$(selector).jAnimateSequence(arrayOfEffects, callback);
```

示例代码：

$('#title').jAnimate('flipOutX');
$('#title').jAnimateOnce('flipOutX');
$('#title').jAnimateSequence(['bounce', 'tada', 'wobble']);

回调函数示例

$('#title').jAnimate('rotateOut', function(){
  alert('animation was finished');
});
$('#title').jAnimateOnce('fadeOutDown', function(self, effect){ 
  alert(effect + ' was finished');
});
$('#title').jAnimateSequence(['bounce', 'tada', 'wobble'], function(){
  alert('sequence was finished')
});