jQuery fadeOut()

jQuery fadeOut() can be applied on a visible HTML element to generate a fade out effect. When fade out effect is applied, the display attribute of element is changed to hidden. The transition though happens as a fade out.

Syntax – jQuery fadeOut()

Following is the syntax to use jQuery fadeOut() method

1. jQuery fadeOut – Default

To fade out a selected HTML Element with default timing,

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

2. jQuery fadeOut – slow/fast

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

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

3. jQuery fadeOut – Time in milliseconds

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

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

Examples – jQuery fadeOut()

The following examples help you understand the usage of jQuery fadeOut() method :

1. Example – Basic jQuery fadeOut()

Following is a basic examples that demonstrates the usage of fadeOut() method.

</>
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(){
  $("#fadeOutBtn").click(function(){
    $("#div1").fadeOut();
  });
});
</script>
</head>
<body>

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

 <button id="fadeOutBtn">Click to fade out</button><br><br>

 <div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
   <a style="line-height:80px;">Learn jQuery fadeOut with default timing.</a>
 </div><br>

</body>
</html>

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

You can provide one of the two options : “slow” or “fast” to control the speed of the effect.

</>
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(){
  $("#fadeOutBtn").click(function(){
    $("#div1").fadeOut("slow");
    $("#div2").fadeOut("fast");
  });
});
</script>
</head>
<body>

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

 <button id="fadeOutBtn">Click to fade out</button><br><br>

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

</body>
</html>

3. Example – jQuery fadeOut(time_in_milliseconds)

Precise control of the fading speed can be done at the scale of milliseconds. Provide a value in milliseconds as first argument.

</>
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(){
  $("#fadeOutBtn").click(function(){
    $("#div1").fadeOut(4000);
    $("#div2").fadeOut(1000);
  });
});
</script>
</head>
<body>

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

 <button id="fadeOutBtn">Click to fade out</button><br><br>

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

</body>
</html>

4. Example – jQuery fadeOut() with Callback function

Callback function can be provided an optional second argument. The callback function is called when the fading out 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(){
 $("#fadeOutBtn").click(function(){
  $("#div1").fadeOut(2000, function(){
   alert("Fading effect completed.");
  });
 });
});
</script>
</head>
<body>

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

<button id="fadeOutBtn">Click to fade out</button><br><br>

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

</body>
</html>

Conclusion

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