jQuery Effects - FadeToggle

jQuery Effects - FadeToggle: Learn about the jQuery fadetoggle() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery fadeToggle() Method

The word toggle means to switch between any two cases. Generally, we are used to the toggle property of an MS word application, where when we use to toggle the capital letters become small and all the small letters switch to capital. Therefore, toggle means switching between events.

In jQuery, when we talk about the fadeToggle() method, we mean to toggle between the two fading events – fadeIn() & fadeOut() methods. This means, that if an element is initially faded out, then this method will make it display and if it is already at display then this will fade out the selected element.

fadeToggle() Method Syntax

$(selector).fadeToggle()
$(selector).fadeToggle(speed, easing, callback)

The speed as a parameter here indicates the speed of the elements that get toggled – fadeIn() and fadeOut(). It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The easing is also an optional parameter that takes – swing, linear as its values. The callback refers to the function which gets called when the fadeToggle() method finishes its task.

The difference between the normal toggle() method and the fadeToggle() method is that the former helps to toggle between the hide() & show() methods whereas the later switches between fadeIn() & fadeout() methods. These fading method also helps to display the content or to hide it as the hide() & show() method does. The only thing is that the fading effects do not change the state of the element to hidden and help to make the content fade throughout.

Let's have a look at the following example where fadeToggle() method has been executed.

jQuery fadeToggle() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - FadeToggle</h2>
    <p>Click the button to toggle the content on the page.</p>
    <button>Fade Toggle</button>
    <hr>
    <h3>THIS CONTENT IS VISIBLE NOW !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').fadeToggle('slow');
        })
    });
  </script>
</html>

Output:

jQuery - Effects: FadeOut

jQuery - Effects: FadeTo

Comments and Discussions!

Load comments ↻