Quick Reach
jQuery fadeIn () method
For a well designed web site, showing images or text upon certain action by the visitor of website or transition in images for marketing pictures leaves a good impression. This is fading effect that jquery makes quite easier to do.
jQuery fadeIn() method allows to fade-in 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 hidden to visible.
Syntax of fadein()
$(selector).fadeIn(speed,callback);
Where:
Selector = can be an element like div, p, etc.
Speed = Optional parameter that specifies the fadeIn speed with possible values of
- “slow”
- “fast”
- Or value in milliseconds
Callback = after fadeIn () method is completed, an optional callback function to perform certain action can be given.
Running example of fadein() method
In this example, as you click “Fadein method jquery” button it will display three hidden blocks with fast, slow and 3000 milliseconds. In real time this can be text, images content etc. contained in div or p.
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
78
79
80
81
82
83
|
<!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(){
$(“#blackblock”).fadeIn(“fast”);
$(“#cyanblock”).fadeIn(“slow”);
$(“#orangeblock”).fadeIn(1000);
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
display:none;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
display:none;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
display:none;
background-color:orange;
}
</style>
</head>
<body>
<button id=“fadebutton”>Click this button to see Fadein 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 fadeToggle() method
Leave A Comment?