FadeToggle elements using jQuery

In this lesson, you will learn how to hide a selected element by fading it to transparent or show already hidden element by fading out it to opaque.

Introduction

The syntax for fadeToggle() function in jQuery is:

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

If you skip these parameters, .fadeToggle() function will use the default values for these parameters and will hide or show element immediately without creating any animation effect.

.fadeToggle() doesn’t remove the element from the DOM. It merely sets the display property of the select element to none once the opacity reaches zero, so it won’t be shown in the design of the web page.

The first parameter is the duration animation effect takes to complete. The default value is 400 milliseconds, which is equal to 0.4 seconds as 1 second has 1000 milliseconds. You can also pass strings slow, normal, and fast as these are equal to 600, 400, and 200 milliseconds, respectively.

The second parameter is the name of an easing function, which specifies the speed of the animation at various points. The default value is called swing. Another function that is mostly used is called linear, which keeps the animation speed constant as the animation progresses.

The third parameter is a user-defined call back function, which is called once the animation is complete. This is used when you need to execute different animations in a sequence for the selected element.

Example of FadeToggle elements in jQuery

In this example, we will create three DIVs and a hyperlink which will create an animation effect when get clicked. If invisible, boxes will appear, and if visible, the boxes will be hidden.

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">Show boxes now</a></p>
</div>
</div>

The CSS

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

.one {
	background-color: #d9eb4b;
}

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

.three {
	background-color: #fd6bb6;
}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    </script> 
    <script>
    $(document).ready(function() {
        if ($('.one').css('display') == 'none') {
            // $('a#anim').text('Show Boxes')
        }
        $('#anim').click(function() {

            $('.one').fadeToggle("600", function() {
                $('.two').fadeToggle("600", function() {
                    $('.three').fadeToggle("600", function() {
                        if ($('.three').css('display') == 'none') {
                            $('a#anim').text('Show boxes now');
                        }
                        if ($('.three').css('display') != 'none') {
                            $('a#anim').text('Hide boxes now');
                        }
                    });
                });
            });

        });
    }); 
  </script>

As you can see, whenever the animation is completed, the text of hyperlink also changes. This can be achieved through a callback function which gets fired after the animation is finished. The functions used in these lessons are .fadeToggle(), .text(), and if condition, which checks for the visibility status of the element and set hyperlink text accordingly.

jQuery FadeOut Elements

Tutorial Home

jQuery slideUp Elements