jQuery淡入淡出_jq淡入淡出的方法

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果：

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

fadeIn()方法

fadeIn() 实现淡入效果，其基本语法如下：

$(selector).fadeIn(speed,callback);

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在fadeIn()方法结束后调用。

$("button").click(function(){  

  $("#p1").fadeIn();  

  $("#p2").fadeIn("slow");  

  $("#p3").fadeIn(3000);  

});  

 

$("button").click(function(){

  $("#p1").fadeIn();

  $("#p2").fadeIn("slow");

  $("#p3").fadeIn(3000);

});

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

fadeOut()方法

fadeOut() 实现淡出效果，其基本语法如下：

$(selector).fadeOut(speed,callback);

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在fadeIn()方法结束后调用。

$("button").click(function(){  

  $("#p1").fadeOut();  

  $("#p2").fadeOut("slow");  

  $("#p3").fadeOut(3000);  

});  

 

$("button").click(function(){

  $("#p1").fadeOut();

  $("#p2").fadeOut("slow");

  $("#p3").fadeOut(3000);

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

fadeToggle()方法

fadeToggle() 交替进行fadeIn()和fadeOut()，如果元素是淡出的，那么fadeToggle()将淡入该元素，如果之前是淡入的，fadeToggle将淡出该元素。

其基本语法如下：

$(selector).fadeToggle(speed,callback);
1

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个可选参数为回调函数，在fadeIn()方法结束后调用。

下面例子，点击按钮之后，可以交替淡出淡入三个矩形。

<meta charset="utf-8">  

<title>JQuery Demo</title>  

<script src="scripts/jquery-1.12.4.js"></script>  

<script>  

    $(document).ready(function () {  

        $("button").click(function () {  

            $("#p1").fadeToggle();  

            $("#p2").fadeToggle("slow");  

            $("#p3").fadeToggle(3000);  

        });  

    });  

</script>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<p>Demonstrate fadeToggle() with different speed parameters.</p>  

<button>Click to fade in/out boxes</button>  

<br>  

<br>  



<p id="p1" style="width: 80px; height: 80px;  

    background-color: red;"></p>  

<br>  

<p id="p2" style="width: 80px; height: 80px;  

    background-color: green;"></p>  

<br>  

<p id="p3" style="width: 80px; height: 80px;  

 background-color: blue;"></p>  
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

<meta charset="utf-8">

<title>JQuery Demo</title>

<script src="scripts/jquery-1.12.4.js"></script>  

<script>

    $(document).ready(function () {

        $("button").click(function () {

            $("#p1").fadeToggle();

            $("#p2").fadeToggle("slow");

            $("#p3").fadeToggle(3000);

        });

    });

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<p>Demonstrate fadeToggle() with different speed parameters.</p>

<button>Click to fade in/out boxes</button>

<br>

<br>



<p id="p1" style="width: 80px; height: 80px;

    background-color: red;"></p>

<br>

<p id="p2" style="width: 80px; height: 80px;

    background-color: green;"></p>

<br>

<p id="p3" style="width: 80px; height: 80px;

 background-color: blue;"></p>
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

fadeTo()方法

fadeTo() 实现淡化到指定的透明度，其基本语法如下：

$(selector).fadeTo(speed,opacity,callback);

必需参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）

第二个必须参数为透明度，值域为0到1之间。

可选参数为回调函数，在fadeIn()方法结束后调用。

$("button").click(function(){  

  $("#p1").fadeTo("slow",0.15);  

  $("#p2").fadeTo("slow",0.4);  

  $("#p3").fadeTo("slow",0.7);  

});  

 

$("button").click(function(){

  $("#p1").fadeTo("slow",0.15);

  $("#p2").fadeTo("slow",0.4);

  $("#p3").fadeTo("slow",0.7);

});

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23