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

访客 阅读:235 2021-04-01 10:01:47 评论:0


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

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

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

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

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

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

  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>  
<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
    $(document).ready(function () { 
        $("#flip").click(function () { 
            $("#panel").slideDown("slow"); 
        }); 
    }); 
</script> 
 
<style type="text/css"> 
    #panel, #flip 
    { 
        padding: 5px; 
        text-align: center; 
        background-color: #e5eecc; 
        border: solid 1px #c3c3c3; 
    } 
 
    #panel 
    { 
        padding: 50px; 
        display: none; 
    } 
</style> 
</head> 
<body> 
 
    <div id="flip">Click to slide down panel</div> 
    <div id="panel">Hello world!</div> 
 
</body> 
</html> 

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

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

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

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

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. });  
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号