slideDown(speed,callback)
通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
这里的 speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
slideUp(speed, callback)
通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。
与slideDown用法相同..只不过就是效果都是反的
slideToggle(speed,callback)
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。
看到网上有人说这个滑动效果是通过控制display样式来实现,一开始我也有此疑问,所以在代码中我添加了一段输出div高度的脚本,以此来验证滑动效果的
确是否通过高度来控制的,结果证明通的确如此。
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 >