Home >>jQuery Tutorial >jQuery fadeIn() Method

jQuery fadeIn() Method

jQuery fadeIn() Method

jQuery fadeIn() Method in jQuery is used to gradually changes the opacity of selected elements from hidden to visible (fading effect) means fade in the element.

Syntax:
$(selector).fadeIn(speed,easing,callback)

Parameter Values

Parameter Description
speed It is an Optional parameter used to Specify the speed of the fading effect. Its Default value is 400 milliseconds

Possible values:

  • milliseconds
  • "slow"
  • "fast"
easing It is an Optional parameter used to specify the speed of the element in different points of the animation. Its Default value is "swing"

Possible values:

  • "swing" – moves faster in the middle and slower in the beginning
  • "linear" - moves with a constant speed

Tip: More easing functions are available in external plugins

callback It is an optional parameter. After the fadeTo() method is completed a function to be executed
Here is an Example of jQuery fadeIn() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("h1").fadeOut();
});
$(".btn2").click(function(){
$("h1").fadeIn();
});
});
</script>
</head>
<body>
<h1>PHPTPOINT</h1>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>

Output:

PHPTPOINT

Example 2:

<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   
<script>  
$(document).ready(function(){  
$("button").click(function(){  
$("#div1").fadeIn();  
$("#div2").fadeIn("slow");  
$("#div3").fadeIn(3000);  
});  
});  
</script>  
</head>  
<body>  
<button>Click me</button><br><br>  
<div id="div1" style="width:80px;height:80px;display:none;background-color:blue;"></div>  
<div id="div2" style="width:80px;height:80px;display:none;background-color:orange;"></div>  
<div id="div3" style="width:80px;height:80px;display:none;background-color:hotpink;"></div>  
</body>  
</html>   

Output: