Define fadeIn() method of jQuery in detail.

The jQuery fadeIn() method allows to fade-in elements of a website. For example, a <div>, <p> or some other element that may contain text, images or other content. The fadeIn jQuery method slowly changes the opacity of the given element from hidden to visible.

Syntax of jQuery fadeIn()

Following is the syntax of using the fadeIn method:
$(selector).fadeIn(speed,callback);
Where:
Selector = can be an element like div, p, etc.
Speed = Optional parameter that specifies the fadeIn speed with the possible values of
“slow”
“fast”
Or the value in milliseconds
Callback = after the fadeIn () method is completed, an optional callback function to perform some action.

An example of fadeIn() method

In the real time, this can be text, images or other content contained in div, p or other elements.

<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:125px; 
height:125px; 
display:none; 
background-color:black; 

.cyanblock { 
width:125px; 
height:125px; 
display:none; 
background-color:cyan; 

.orangeblock { 
width:125px; 
height:125px; 
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>

Need Help? Contact Us.

Log in

*
*

Forgot password?

*

New User

*
*
*
*