FadeOut elements using jQuery

In this lesson, you will learn how to hide the selected element on the web page by fading it to transparent.

Introduction

The syntax for fadeout() function in jQuery is:

fadeOut([duration] [,easing function name] [, callback function ])

All of these three parameters are optional.

The .fadeOut() function hides the selected element by animating its opacity. Once its opacity reaches zero, the display property of the element is set to none to disappear the element completely.

The first parameter ‘duration’ specifies the speed of the animation in milliseconds. 1 second is equal to 1000 milliseconds so if you want an element to fade out to transparent in 5 seconds, you need to use $(‘element’).fadeOut(5000);

jQuery also allows you to use string values instead of numbers to represent time. The string fast, slow, normal are equivalent to 200, 600, and 400 milliseconds. As you increase the number the animation, it will become slow. The default duration for fadeout() function is 400 milliseconds.

The second parameter represents the name of an easing function which specifies the speed of animation progression at various points. The default easing function for .fadeOut() function is called swing. With a swing, the animation speed is slightly faster at the start and end of the animation then the speed in the middle area.

If provided, the callback function is called when the animation is complete. This is used to execute multiple animations in a sequence for the selected element.

Example of FadeOut elements in jQuery

In this example, we will create three DIVs and one hyperlink which will start the animation when get clicked.

The HTML

<div id="container">
   <div class="box one"></div>
   <div class="box two"></div>
   <div class="box three"></div>
   <p><a href="#" id="anim">Hide boxes</a></p>
</div>

The CSS

<style>* {
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	font-size: 14px;
}

.box {
	width: 100px;
	height: 40px;
	margin: 2px;
}

.one {
	background-color: #d9eb4b;
}

.two {
	background-color: #00A9FE;
}

.three {
	background-color: #fd6bb6;
}

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 450px;
}

</style>

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    </script>
$(document).ready(function() {
    $('#anim').click(function() {
        $('.one').fadeOut("1000", function() {
            $('.two').fadeOut("2000", function() {
                $('.three').fadeOut("3000", function() {
                    $('a#anim').text('Boxes are hidden now');
                });
            });
        });

    });
}); </script>

fadeOut() function in jQuery only hides the selected element by making it transparent and setting the display property to none but doesn’t remove selected element from the document object model. In case you want to remove the element, use .remove() function of jQuery as follows:

$("#element").fadeOut("normal", function() {
    $(this).remove();
});

The coding example is simple and deals with only one concept at a time, but still, if you have any question regarding fadeout() function, feel free to ask.

jQuery FadeIn Elements

Tutorial Home

jQuery FadeToggle Elements