jQuery 入门教程(7): 滑动效果

jQuery支持使用下面方法来实现HTML元素的滑动效果:

  • slideDown()
  • slideUp()
  • slideToggle()

slideDown方法
用来实现向下滑动动画效果,其基本语法为:

$(selector).slideDown(speed,callback);

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideDown()方法结束后调用。

下面例子点击按钮#panel 将采用下滑方式显示出来:

[html]  view plain copy print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta charset="utf-8">  
  4. <title>JQuery Demo</title>  
  5. <script src="scripts/jquery-1.9.1.js"></script>  
  6. <script>  
  7.     $(document).ready(function () {  
  8.         $("#flip").click(function () {  
  9.             $("#panel").slideDown("slow");  
  10.         });  
  11.     });  
  12. </script>  
  13.   
  14. <style type="text/css">  
  15.     #panel, #flip  
  16.     {  
  17.         padding: 5px;  
  18.         text-align: center;  
  19.         background-color: #e5eecc;  
  20.         border: solid 1px #c3c3c3;  
  21.     }  
  22.   
  23.     #panel  
  24.     {  
  25.         padding: 50px;  
  26.         display: none;  
  27.     }  
  28. </style>  
  29. </head>  
  30. <body>  
  31.   
  32.     <div id="flip">Click to slide down panel</div>  
  33.     <div id="panel">Hello world!</div>  
  34.   
  35. </body>  
  36. </html>  

slideUp方法
用来实现向上滑动动画效果,其基本语法为:

$(selector).slideUp(speed,callback);

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。

[javascript]  view plain copy print ?
  1. $("#flip").click(function(){  
  2.   $("#panel").slideUp();  
  3. });  

slideToggle方法
用来实现交替显示向上向下滑动动画效果,如果之前是下滑显示,slideToggle则显示slideUp(),反之显示slideDown
其基本语法为:

$(selector).slideToggle(speed,callback);

可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在slideUp()方法结束后调用。

[javascript]  view plain copy print ?
  1. $("#flip").click(function(){  
  2.   $("#panel").slideToggle();  
  3. });  

你可能感兴趣的:(jQuery 入门教程(7): 滑动效果)