Updated March 21, 2023
Introduction to jQuery fadeOut()
The fadeOut() method of jQuery is used to gradually hide an element in the DOM by fading it to transparency. This is a very straightforward method. If the element is visible and the fadeOut() method is called on that element, the element slowly turns transparent until it becomes invisible.
Syntax for jQuery fadeOut()
The syntax of the fadeOut() method has many variants based on the number of optional parameters passed to the method.
Syntax #1
The basic and the most elementary syntax is as follows:
$(<element>).fadeOut();This method will fade the element in 400 milliseconds. The value 400 is the default value of the duration parameter.
Syntax #2
The advanced syntax expects some parameters as follows:
$(<element>).fadeOut([duration], [complete]);Here duration is the time in milliseconds for the fading animation effect. If this argument is not supplied, the default value of 400 milliseconds is applied. The complete is a callback function that is called once the fading-out animation is complete. A very important point to note here is that the callback function is called once for each element.
Syntax #3
The jQuery v1.4.3 introduced another variation of the fadeOut method. It expected another string-typed parameter that would define the type of transition during the animation. The possible values are ‘swing’ or ‘linear’, the former being the default.
$(<element>).fadeOut([duration], [easing], [complete]);So, how does the fadeOut method achieve its goal? Simple answer, it plays with the CSS opacity and displays properties of the element. Over the duration of the fading out activity, the opacity of the element is gradually decreased. Once it reaches zero, the display property is set to none. The higher the duration, the slower is the fading animation.
Examples of jQuery fadeOut()
Let us look at some of the examples of the fadeOut() method.
The window will look like the below screen in Chrome:
This is the playground for most of the jQuery related concepts. We would be using this playground throughout this article. Now, fire up your browser and go to any websites which are built upon jQuery. What better option than the website of jQuery itself (https://jquery.com/). Open the developer console.
Next, we identify the element we would like to fade. Let’s fade out the jQuery logo. From the Elements tab in the developer window, you would see that the element is this:
<h2 class="logo"><a href="/" title="jQuery">jQuery</a></h2>
This element is uniquely defined through a class logo. We would use this class as a selector.
Next, go to the console tab and type the following command:
$('.logo').fadeOut();As you press enter, notice that the jQuery logo slowly disappears from the page.
Next, go back to the Elements tab and search for the logo element again. Notice the addition of CSS display property to the element now. It has now changed to this:
<h2 class="logo" style="display: none;"><a href="/" title="jQuery">jQuery</a></h2>
But wait, we couldn’t see the opacity property in action. Let’s do that. Go back to the console tab and type the following command:
$('.logo').fadeOut(10000);We are giving a duration of 10 seconds for the fading animation. As you press enter, be quick to go back to the Elements tab. You would notice that the jQuery logo disappears on the page with the CSS opacity property in action.
Implementation of jQuery fadeOut()
Let us try to implement the whole jQuery fadeOut() example from scratch. You would need an editor (as simple as notepad would also work) and a browser.
Step 1 – Open Notepad and Paste the Following Code in it.
<!DOCTYPE html>
<html>
<head>
<!-- This is the CDN for jQuery. It references the jQuery library on the go. Your computer must be connected to the internet. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// fade text out on click of button 1
$("#btn1").click(function () {
$("#para").fadeOut();
});
// fade text out slowly on click of button 2
$("#btn2").click(function () {
$("#para").fadeOut(5000);
});
// fade out image 1 very slowly in linear transition
// fade out image 2 very slowly in swing transition
// on click of button 3
$("#btn3").click(function () {
$("#pic1").fadeOut(8000, "linear", function () {
window.alert("Yayy!!! Pic 1 faded out");
});
$("#pic2").fadeOut(8000, "swing", function () {
window.alert("Yayy!!! Pic 2 faded out");
});
});
// fade text out on click of button 1
$("#btn4").click(function () {
$(".ele").fadeIn(0);
});
});
</script>
</head>
<body>
<p id="para" class="ele">EduCBA</p>
<img id="pic1" class="ele" src="https://cdn.educba.com/academy/wp-content/uploads/2019/01/cropped-EDUCBA_LOGO.png" />
<img id="pic2" class="ele" src="https://cdn.educba.com/academy/wp-content/uploads/2019/01/cropped-EDUCBA_LOGO.png" />
<br />
<label>linear</label>
<label>swing</label>
<br />
<br />
<button id="btn1">Fade Out text</button>
<button id="btn2">Fade Out text slowly</button>
<button id="btn3">Fade Out images (different transitions)</button>
<button id="btn4">Show All</button>
</body>
</html>Step 2 – Save the File as an HTML File
Save the file with the extension .html. This will save the file as an HTML file.
Step 3 – Open the Browser and Open the File You Just Saved
The rendered HTML page would look like this:
Conclusion
So, we have covered the fadeOut() function of jQuery in this article. We have understood how the fadeOut function works behind the scenes. In addition, we implemented our own working fadeOut model. Also, once the concept is familiarised, you would play around more with various other optional parameters supported by the fadeOut method.
It is recommended to learn more about the various plugins available in the market for an even advanced fading out experience. You may deep dive into the code for those plugins and understand how they are implemented on top of the jQuery fadeOut API. Once understood, you may develop your own plugin as well!
Recommended Articles
This is a guide to jQuery fadeOut(). Here we discuss the Introduction and the examples of jQuery fadeOut() along with steps to implement the fadeOut() method. You may also look at the following articles to learn more –
