jQuery fadeIn()

Introduction

Fade in all <p> elements:

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from   w  ww  .  ja v  a 2 s. c  om
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").fadeOut();
  });
  $(".btn2").click(function(){
    $("p").fadeIn();
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

</body>
</html>

The fadeIn() method gradually changes the opacity for selected elements from hidden to visible.

Hidden elements will not be displayed at all.

It will no longer affect the layout of the page.

Syntax

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

Parameter	Optional	Description
speed	Optional.	speed of the fading effect. Default value is 400 milliseconds Possible values: milliseconds "slow" "fast"
easing	Optional.	speed of the element in different points of the animation. Default value is "swing" Possible values: "swing" - moves slower at the beginning/end, faster in the middle "linear" - moves in a constant speed
callback	Optional.	A function to be executed after the `fadeIn()` method is completed

Previous Next