JQuery之滑动效果slideDown ， slideUp , slideToggle
slideDown(speed,callback)
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
slideUp(speed, callback)
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
与slideDown用法相同..只不过就是效果都是反的
slideToggle(speed,callback)
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
看到网上有人说这个滑动效果是通过控制display样式来实现，一开始我也有此疑问，所以在代码中我添加了一段输出div高度的脚本，以此来验证滑动效果的
确是否通过高度来控制的，结果证明通的确如此。
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title>滑动slide</title>
4 <script src="../jquery-1.3.js" type="text/javascript" language="javascript"></script>
5 <style type="text/css">
6 div{border:2px dashed #ff0000 }
7 </style>
8 <script language="javascript" type="text/javascript">
9
10 $(document).ready(function() {
11 $("#ctrSlideDown").click(function() {
12 $("#slideDown").slideDown("low",
13 alert("DOWN！")
14 );
15 alert($("#slideDown").height()); //通过弹出的div的高度，可以看出slidedown 是通过高度的变化来实现效果，而不是我之前想得控制display
16 });
17
18 $("#ctrSlideUp").click(function() {
19 $("#slideDown").slideUp("low",
20 alert("UP！")
21 );
22 alert($("#slideDown").height());
23 });
24
25 $("#ctrSlideToggle").click(function() {
26 $("#slideToggle").slideToggle("slow",
27 function() { alert("TOGGLE！") }
28 );
29 alert($("#slideToggle").height());
30 });
31 }
32 )
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <!--
38 slideDown(speed,callback)
39 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
40
41 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
42
43 这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
44
45
46 -->
47 <input type="button" value="slideDown" id="ctrSlideDown" /><input type="button" value="slideUp" id="ctrSlideUp" />
48 <div id="slideDown" style=" display:none;">
49 slidedown
50 </div>
51
52 <!--
53 slideUp(speed, callback)
54
55 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
56
57 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
58
59 与slideDown用法相同..只不过就是效果都是反的
60 -->
61 <br />
62
63
64 <!--
65 slideToggle(speed,callback)
66 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
67
68 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
69
70
71 -->
72 <input type="button" value="slideToggle" id="ctrSlideToggle" />
73 <div id="slideToggle">
74 slidetoggle
75 </div>
76 </form>
77 </body>
78 </html>
2 <head runat="server">
3 <title>滑动slide</title>
4 <script src="../jquery-1.3.js" type="text/javascript" language="javascript"></script>
5 <style type="text/css">
6 div{border:2px dashed #ff0000 }
7 </style>
8 <script language="javascript" type="text/javascript">
9
10 $(document).ready(function() {
11 $("#ctrSlideDown").click(function() {
12 $("#slideDown").slideDown("low",
13 alert("DOWN！")
14 );
15 alert($("#slideDown").height()); //通过弹出的div的高度，可以看出slidedown 是通过高度的变化来实现效果，而不是我之前想得控制display
16 });
17
18 $("#ctrSlideUp").click(function() {
19 $("#slideDown").slideUp("low",
20 alert("UP！")
21 );
22 alert($("#slideDown").height());
23 });
24
25 $("#ctrSlideToggle").click(function() {
26 $("#slideToggle").slideToggle("slow",
27 function() { alert("TOGGLE！") }
28 );
29 alert($("#slideToggle").height());
30 });
31 }
32 )
33 </script>
34 </head>
35 <body>
36 <form id="form1" runat="server">
37 <!--
38 slideDown(speed,callback)
39 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
40
41 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
42
43 这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
44
45
46 -->
47 <input type="button" value="slideDown" id="ctrSlideDown" /><input type="button" value="slideUp" id="ctrSlideUp" />
48 <div id="slideDown" style=" display:none;">
49 slidedown
50 </div>
51
52 <!--
53 slideUp(speed, callback)
54
55 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
56
57 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
58
59 与slideDown用法相同..只不过就是效果都是反的
60 -->
61 <br />
62
63
64 <!--
65 slideToggle(speed,callback)
66 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
67
68 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。
69
70
71 -->
72 <input type="button" value="slideToggle" id="ctrSlideToggle" />
73 <div id="slideToggle">
74 slidetoggle
75 </div>
76 </form>
77 </body>
78 </html>
