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

当前位置:主页 > jQuery库 > 布局和界面 > 基于Animate.css的jQuery动画特效插件
基于Animate.css的jQuery动画特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-12
    阅读:
简要教程

janimate是一款非常实用的基于Animate.cssjQuery动画特效插件。该动画特效插件允许你在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')
});