jQuery fadeIn()

Introduction

Fade in all <p> elements:

View in separate window

<!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



PreviousNext

Related