Quick Reach
jQuery fadeOut() method
jQuery fadeOut() method fades out the visible elements of website, for example <div> or <p> etc. that may contain text, images or other content. It slowly changes the opacity of given element from visible to hidden.
Syntax of fadeOut()
$(selector).fadeOut(speed,callback);
Where:
Selector = can be an element like div, p, etc.
Speed = Optional parameter that specifies the fadeOut speed with possible values of
- “slow”
- “fast”
- Or value in milliseconds
Callback = after fadeOut() method is completed, an optional callback function to perform certain action can be given.
Running example of fadeOut() jQuery method
In this example, as you click “FadeOut method jquery” button it will hide three visible blocks with fast, slow and 3000 milliseconds speed.
Experience this example online
|
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<head>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“#fadebutton”).click(function(){
$(“#orangeblock”).fadeOut(“fast”);
$(“#cyanblock”).fadeOut(“slow”);
$(“#blackblock”).fadeOut(“3000”);
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<button id=“fadebutton”>Click this button to see FadeOut method jquery</button>
<br>
<div id=“blackblock” class=“blackblock”></div>
<div id=“cyanblock” class=“cyanblock”></div>
<div id=“orangeblock” class=“orangeblock”></div>
</body>
</html>
|
Also see jQuery fadeIn() method | jQuery fadeToggle method
Leave A Comment?