jQueryの縦型アニメーション

垂直アニメーション

slideDown(speed,callback)

高さの変更 (下方向に増加) を通じて、一致するすべての要素を動的に表示し、オプションで表示完了後にコールバック関数をトリガーします。

このアニメーション効果は要素の高さのみを調整し、一致する要素を「スライド」形式で表示できるようにします。

speed here (文字列|数値): (オプション) 3 つの所定の速度 (「遅い」、「通常」、または「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (例: 1000)

slideUp(speed, callback)

高さを変更する (上に向かって減少する) ことによって、一致するすべての要素を動的に非表示にし、非表示の完了後にオプションでコールバック関数をトリガーします。

このアニメーション効果は要素の高さを調整するだけで、一致する要素を「スライド」方式で非表示にすることができます。

使い方はslideDownと同じですが、効果は逆です

slideToggle(speed, callback)

高さの変更を通じて、一致するすべての要素の表示を切り替えます。オプションで切り替え完了後にトリガーします。コールバック関数。

このアニメーション効果は要素の高さのみを調整し、一致する要素を「スライド」方式で非表示または表示できるようにします。

りー

学び続ける

新しいファイル

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
 <head>
 <title>php.cn</title>
 <meta charset="utf-8" />
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 <script>
 function f1(){
 //隐藏 hidden
 $('div').slideUp(3000);
 }
 function f2(){
 //显示 show
 $('div').slideDown(3000);
 }
 function f3(){
 $('div').slideToggle(2000);
 }
 </script>
 <style type="text/css">
 div {width:300px; height:200px; background-color:blue;}
 </style>
 </head>
 <body>
 <div></div>
 <input type="button" value="隐藏" onclick="f1()" />
 <input type="button" value="显示" onclick="f2()" />
 <input type="button" value="开关" onclick="f3()" />
 </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX