夏日博客

A-A+

jQuery中animate方法简单用法

2016年01月11日 前端设计 暂无评论 阅读 8 views 次

在jquery中animate是可以动态的来改变改变"div" 元素的高度了，下面我们就一起来看看animate方法简单用法吧，希望文章能够对各位有用。

animate()方法提供了自定义的动画，能够实现更加新颖的动画效果,其语法结构,代码如下:

  1. $(element).animate({  
  2.  param1: value1,  
  3.  param2: value2},  
  4.  speed, function() {  
  5.  /* stuff to do after animation is complete */  
  6. });  

简单案例一：

单击侧面划入一个图层DIV2,单击DIV2关闭图层,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="zh-CN">  
  4.     <meta charset="UTF-8">  
  5.     <title>untitled</title>  
  6.     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">  
  7.     <meta name="format-detection" content="telephone=no">  
  8.     <style>  
  9.         *{padding: 0;margin: 0;}  
  10.         .wrap{width: 100%;height: 500px;overflow: hidden;position:relative;}  
  11.         .wrap .left{background-color: #000;color:#fff;height: 500px;width: 100%;}  
  12.         .wrap .right{background-color: #888;color:#fff;height: 500px;width: 100%;position: absolute;top:0;right: -100%;}  
  13.     </style>  
  14.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
  15.     <script>  
  16.     $(function () {  
  17.         $('.left').click(function() {  
  18.             if (!$('.right').is(":animated")) {//判断元素是否处于动画状态，防止在执行动画期间多次单击导致元素的right属性累加  
  19.                 $('.right').animate({  
  20.                 right: "+=100%"},  
  21.                 300);  
  22.             };  
  23.             // $(this).unbind('click');  
  24.    
  25.         });  
  26.    
  27.         $('.right').click(function() {  
  28.             if(!$(this).is(":animated")){  
  29.                 $(this).animate({  
  30.                 right: "-=100%"},  
  31.                 300);  
  32.             }  
  33.    
  34.         });  
  35.    
  36.     })  
  37.     </script>  
  38. </head>  
  39. <body>  
  40.     <div class="wrap">  
  41.         <div class="left">左侧</div>  
  42.         <div class="right">右侧</div>  
  43.     </div>  
  44. </body>  
  45. </html>  

简单案例二:返回顶部或底部,代码如下:

  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     // Scroll page to the bottom  
  4.     $('a.scrollToBottom').click(function() {  
  5.         $('html, body').animate({  
  6.             scrollTop: $(document).height()  
  7.         }, 300);  
  8.         return false;  
  9.     });  
  10.     // Scroll page to the top  
  11.     $('a.scrollToTop').click(function() {  
  12.         $('html, body').animate({  
  13.             scrollTop: 0  
  14.         }, 'slow');  
  15.         return false;  
  16.     });  
  17. })  
  18. </script>  
标签：

给我留言