Quick Reach
The fadeToggle () method
To allow users to show and hide elements of website with fading effects, fadeToggle method can be used. jquery fadeToggle method will fadein if elements were fadeout and vice versa.
You may use fadeToggle to show and hide images, menus, table of content etc. Show and hide methods would also do this without fading effects.
Syntax of fadeToggle jquery
Following the syntax of fadetoggle in jquery:
$(selector). fadeToggle (speed,callback);
Running Example of fadeToggle() method
Following example shows how fadetoggle jquery method works to show and hide elements with fading effect.
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").fadeToggle("fast");
$("#cyanblock").fadeToggle("slow");
$("#blackblock").fadeToggle("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/fadeIn using fadeToggle 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 fadeOut() method | jquery fadeIn() method | jquery fadeTo() method
Leave A Comment?