jQuery fadeIn() Method

Last Updated:

jQuery fadeIn() Method

The jQuery fadeIn() method will display the matched elements by fading them to opaque.

This method is often used with jQuery fadeOut() method.

Note: Using fadeIn() method, the hidden elements will not be displayed at all.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery fadeIn() Method</h1> <button id="myFadeOut">Fade Out</button> <button id="myFadeIn">Fade In</button> <script> $(document).ready(function(){ $("#myFadeOut").click(function(){ $("p").fadeOut(); }); $("#myFadeIn").click(function(){ $("p").fadeIn(); }); }); </script> </body> </html>

Syntax

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

Parameter Values

ValueTypeExplanation
speed Optional Specifies the speed of the fading effect.
Default value is 400 milliseconds.
Possible values are
  • "slow"
  • "fast"
  • milliseconds
easing Optional Specifies the easing function to use for the transition.
Default value is "swing"
Possible values are
  • "swing"
  • "linear"
callback Optional Specifies a function to be called once the animation is completed.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
fadeIn()YesYesYesYesYesYesYesYesYesYesYesYesYes

fadeIn() with Speed

In the following example, we will specify the speed of the fading effect for fadeIn() method to 2000ms (2 seconds).

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery fadeIn() Method</h1> <button id="myFadeOut">Fade Out</button> <button id="myFadeIn">Fade In</button> <script> $(document).ready(function(){ $("#myFadeOut").click(function(){ $("p").fadeOut(); }); $("#myFadeIn").click(function(){ $("p").fadeIn(2000); }); }); </script> </body> </html>

fadeIn() with Easing

In the following example, we will specify the easing function for fadeIn() method to linear.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery fadeIn() Method</h1> <button id="myFadeOut">Fade Out</button> <button id="myFadeIn">Fade In</button> <script> $(document).ready(function(){ $("#myFadeOut").click(function(){ $("p").fadeOut(); }); $("#myFadeIn").click(function(){ $("p").fadeIn(2000, "linear"); }); }); </script> </body> </html>

fadeIn() with Callback

In the following example, we will call a function (myFunction) once the fading effect for fadeIn() method is finished.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery fadeIn() Method</h1> <button id="myFadeOut">Fade Out</button> <button id="myFadeIn">Fade In</button> <script> $(document).ready(function(){ $("#myFadeOut").click(function(){ $("p").fadeOut(); }); $("#myFadeIn").click(function(){ $("p").fadeIn(2000, "linear", myFunction); }); }); function myFunction(){ alert("fadeIn is completed"); } </script> </body> </html>

Share this Page

Meet the Author