The fadeTo() method of jQuery
In previous chapters, we learned how to use jQuery fadeIn and fadeOut methods to make elements visible or hidden with effects. However, in some situations you may need to make elements a slightly visible rather hiding completely, e.g. showing the “disable” parts of your website etc.
See an example of fadeTo
The fadeTo method will do that, how? See the syntax and example below:
Syntax of fadeTo method
Following is the syntax of fade to method:
$(selector).fadeTo(speed,opacity,callback);
Where
Selector = an element of the web page.
Opacity = this is the required parameter of jQuery fadeTo that defines to which extent the elements should be hidden. It ranges from 0 to 1. Where 0 makes the elements hidden and 1 completely visible.
Speed = Optional parameter that specifies the fadeTo speed with possible values of:
- “slow”
- “fast”
- Or value in milliseconds
Callback = An optional callback function after the method is completed its execution.
Example of fadeTo method
Following example shows how to use fadeTo jQuery method. As you click on the button, it will affect the visibility of boxes by the given values in jQuery fadeTo method.
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”).fadeTo(“fast”,0.1);
$(“#cyanblock”).fadeTo(“slow”,0.3);
$(“#blackblock”).fadeTo(“3000”,0.4);
});
});
</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 fadeTo effect</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 | jQuery fadeToggle | jQuery fadeIn
Leave A Comment?