页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery.animate.js调用Animate.css实现强大的css3动画

文本链接 html5 HTML我帮您 1年前  次浏览

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

jquery.animate.js调用Animate.css实现强大的css3动画

虽然借助 animate.css 能够很方便、快速的制作CSS3动画效果,但还是建议看看 animate.css的代码,也许你能从中学到一些东西。

先扩展个jquery.animate.js插件吧

(function($){
    $.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
    });
})(jQuery);

1、首先引入animate css文件1、首先引入animate.css,jquery.animate.js文件

<head>
  <link rel="stylesheet" href="animate.min.css">
  <script src="jquery.animate.js"></script>
</head>
2、给指定的元素加上指定的动画样式名

<div class="animated fadeInLeft"></div>
这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现的元素都得添加这个。第二个是指定的动画样式名。


3、如果说想给某个元素动态添加动画样式,可以通过jquery来实现:

效果可以包括:bounce、flash、pulse、rubberBand、shake、headShake、swing、tada、wobble、jello、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeOut、fadeOutDown、fadeOutDownBig、fadeOutLeft、fadeOutLeftBig、fadeOutRight、fadeOutRightBig、fadeOutUp、fadeOutUpBig、flipInX、flipInY、flipOutX、flipOutY、lightSpeedIn、lightSpeedOut、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、hinge、rollIn、rollOut、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、slideInDown、slideInLeft、slideInRight、slideInUp、slideOutDown、slideOutLeft、slideOutRight、slideOutUp等任选一个.

$(function(){
    $('.animated').animateCss('bounceOutLeft');
});

扩展阅读

强大元素级设置滑块插件Animate Slider(推荐)



相关链接

发表评论