animate()方法提供了自定义的动画，能够实现更加新颖的动画效果，其语法结构：
|
1 2 3 4 5 6 |
$(element).animate({ param1: value1, param2: value2}, speed, function() { /* stuff to do after animation is complete */ }); |
简单案例一：
单击侧面划入一个图层DIV2，单击DIV2关闭图层：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>untitled</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <meta name="format-detection" content="telephone=no"> <style> *{padding: 0;margin: 0;} .wrap{width: 100%;height: 500px;overflow: hidden;position:relative;} .wrap .left{background-color: #000;color:#fff;height: 500px;width: 100%;} .wrap .right{background-color: #888;color:#fff;height: 500px;width: 100%;position: absolute;top:0;right: -100%;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { $('.left').click(function() { if (!$('.right').is(":animated")) {//判断元素是否处于动画状态，防止在执行动画期间多次单击导致元素的right属性累加 $('.right').animate({ right: "+=100%"}, 300); }; // $(this).unbind('click'); }); $('.right').click(function() { if(!$(this).is(":animated")){ $(this).animate({ right: "-=100%"}, 300); } }); }) </script> </head> <body> <div class="wrap"> <div class="left">左侧</div> <div class="right">右侧</div> </div> </body> </html> |
点击查看DEMO。
简单案例二：返回顶部或底部
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> $(document).ready(function() { // Scroll page to the bottom $('a.scrollToBottom').click(function() { $('html, body').animate({ scrollTop: $(document).height() }, 300); return false; }); // Scroll page to the top $('a.scrollToTop').click(function() { $('html, body').animate({ scrollTop: 0 }, 'slow'); return false; }); }) </script> |