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 >


 

转载于:https://www.cnblogs.com/zjz008/archive/2009/02/18/1393490.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值