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

叁歲伎倆 2023-10-16 19:04 30阅读 0赞

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

*  slideDown()
 *  slideUp()
 *  slideToggle()

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

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

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

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

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

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][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("\#flip").click(function()\{
2.  $("\#panel").slideToggle();
3.  \});

[view plain]: http://blog.csdn.net/mapdigit/article/details/8653045#