html5 animate 特效,基于Animate.css的jQuery动画特效插件

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

安装

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

bower install jquery-janimate

npm install janimate

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

使用方法

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

调用插件

在页面加载完毕之后，可以通过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')

});