animate.css结合jquery实现完美动画效果
css3带来了更炫的效果,虽然写动画有点麻烦,但还是得懂啦^_^
animate.css来自大牛Daniel Eden,这个css库实现包装了一堆酷炫的动画效果,而使用只需要设置类而已,大大简化了动画的使用。
使用方法
1、首先到官网下载文件,找到animate.min.css,引入文件:
<head> <link rel="stylesheet" href="animate.min.css"> </head>
2、为元素添加动画类,具体看Demo,自行选择需要的效果,必须添加一个animated类和一个效果类例如bounceIn类:
<div id="demo" class="animated bounceIn">Animate.css Demo</div>
设置好动画类之后刷新即可查看效果,但是动画只能执行一次。
3、利用jquery配置,实现鼠标控制动画执行,其实需要不断得删除添加类:
<script> $(document).ready(function(){ $("#demo").mouseover(function(){ $(this).addClass("animated swing"); }); $("#demo").mouseleave(function(){ $(this).removeClass("animated swing"); }); }); </script>
注意事项
重点注意元素的位置属性,动画是利用元素的相对位置执行的,例如本站的导航的子菜单开始隐藏在left:-9999px;使用时需要设置left:auto;,才能正常看到动画。
所有完整的动画效果查看Demo,然后自己尝试一下吧。
点赞13
支持一下