jQuery fadeIn()

jQuery fadeIn() can be applied on HTML element to generate a fading effect. Usually, the initial state of the HTML element is hidden, so that when fadeIn effect is applied, the display attribute of element is changed to visible with the transition effect as fading.

In this tutorial, you will learn about jQuery fadeIn() method, its syntax and usage, with examples.

Syntax – jQuery fadeIn()

The syntax to use jQuery fadeIn() method is as shown in the following.

1. jQuery fadeIn – Default

To fade in a selected HTML Element with default timing,

</>
Copy
$("htmlElement").fadeIn();

2. jQuery fadeIn – slow/fast

You can also provide a “slow” or “fast” argument to the fadeIn() method to make the fading process slow or fast respectively.

</>
Copy
$("htmlElement").fadeIn("slow");
$("htmlElement").fadeIn("fast");

3. jQuery fadeIn – Time in milliseconds

To control the timing precisely, you can provide time in milliseconds as the argument to jQuery fadeIn() method

</>
Copy
$("htmlElement").fadeIn(4000); // for 4000 milliseconds

Examples – jQuery fadeIn()

Following examples help you understand the usage of jQuery fadeIn() method :

1. Example – Basic jQuery fadeIn()

Following is a basic example to demonstrate the usage to jQuery fadeIn() method to get fading effect of HTML Element(s).

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeinBtn").click(function(){
    $("#div1").fadeIn();
  });
});
</script>
</head>
<body>

 <p>Basic fadeIn() example.</p>

 <button id="fadeinBtn">Click to fade in</button><br><br>

 <div id="div1" style="width:100%;height:80px;display:none;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeIn</a>
 </div>

</body>
</html>

2. Example – jQuery fadeIn(“slow”), fadeIn(“fast”)

“slow” and “fast” are the two quick options that control the speed of fading. The words slow and fast are self explanatory for the speed of fading.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeinBtn").click(function(){
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("fast");
  });
});
</script>
</head>
<body>

 <p>Basic fadeIn() example.</p>

 <button id="fadeinBtn">Click to fade in</button><br><br>

 <div id="div1" style="width:100%;height:80px;display:none;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeIn slow</a>
 </div><br>
 <div id="div2" style="width:100%;height:80px;display:none;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeIn fast</a>
 </div>

</body>
</html>

3. Example – jQuery fadeIn(time_in_milliseconds)

To control the speed of fading, jQuery fadeIn() method could be passed with milliseconds as argument. Following example illustrates the same. 1000ms = 1sec, hence $(“#div1”) fades-in in 1sec while $(“#div1”) fades-in in 4000ms = 4sec.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeinBtn").click(function(){
    $("#div1").fadeIn(1000);
    $("#div2").fadeIn(4000);
  });
});
</script>
</head>
<body>

 <p>Basic fadeIn() example.</p>

 <button id="fadeinBtn">Click to fade in</button><br><br>

 <div id="div1" style="width:100%;height:80px;display:none;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeIn 1000 milliseconds</a>
 </div><br>
 <div id="div2" style="width:100%;height:80px;display:none;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeIn 4000 milliseconds</a>
 </div>

</body>
</html>

4. Example – jQuery fadeIn() with Callback function

Callback function is an optional second argument. The callback function is called when the fading in effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#fadeToggleBtn").click(function(){
  $("#div1").fadeToggle(4000, function(){
      alert("Fading completed.");
    });
 });
});
</script>
</head>
<body>

<p>jQuery fadeToggle() example</p>

<button id="fadeToggleBtn">Click to fading toggle effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle with Callback function</a>
</div>
</div>
</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery fadeIn() method : Syntax and Usage with examples.