What is jQuery fadetoggle() method?
jQuery is a JavaScript library that provides us with multiple features and tools to handle the HTML document. It is widely used as it is faster and more efficient in performing web development-related tasks, including object animations and event handling. To use jQuery, we must include its library in the HTML document. To include the library, write the following code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
In this Answer, we will learn what is fadeToggle() method in jQuery.
Note: To understand the concept better, you can first read the Answer on
fadeIn()andfadeOut()method.
The fadeToggle() method
We use the fadeToggle() method to toggle between fading in the element and fading it out.
Syntax
The syntax of fadeToggle() method is as follows:
$(selector).fadeToggle(fadeSpeed, fadeEasing, callbackFunction);
selector: It is the element we want to apply thefadeToggle()method on.fadeSpeed(optional): It is the speed of the toggle animation. We can set it to slow, fast, normal or give the milliseconds value.fadeEasing(optional): It is the speed at which our animation accelerates or decelerates. For example, we can set it to swing or linear.callbackFunction(optional): It is the function called after the animation has completed.
Examples
The following examples will help us better understand the fadeToggle() method:
Without parameters
We use the fadeToggle() method without parameters in the following code.
Let's understand what happens in the index.html file:
Lines 3–5: We define the document's
titlein the<head>tag.Line 7: We include the jQuery library.
Lines 8–14: We write the JavaScript code in the
<script>tag. Thedocument.ready()function executes after the DOM has loaded completely without making an explicit call. In this function, we call thefadeToggle()method for the element with class nameelementwhen the button with idtoggleButtonis clicked.
Note: There are no parameters in the fadeToggle() method so the default values for fadeSpeed and FadeEasing will be used which are 400 and swing respectively.
Lines 16–23: We write all the styling code in the
<style>tag.Lines 25–29: We create a
<button>and<div>.
With parameters
We use the fadeToggle() method with parameters in the following code.
Let's understand what happens in the index.html file:
Lines 8–16: We call the
fadeToggle()method for the element with class nameelementwhen the button with idtoggleButtonis clicked. The parameters in thefadeToggle()method show that5000is the speed,swingis the easing parameter, andfunction()is the callback function that will be executed once the animation completes.
Conclusion
The fadeToggle() function in jQuery provides a simple and convenient way to apply fade animation effects to elements in the HTML document. Using this function, we can easily toggle the visibility of elements with a smooth fade-in or fade-out transition.
