Updated March 20, 2023
Introduction on JQuery fadeToggle effects
Among the most popular JavaScript libraries, JQuery is one of them. It contains many features some of the features are user interface, extensibility, core functions, Ajax, selection, traversal, manipulation, and CSS. By using fadeToggle() method we can toggle between the fadein() and fadeout() methods. If the particular elements are to be faded out, the particular elements can be faded in by using the fadeToggle() method. It is vice versa for the above if the particular elements are faded in, the particular elements can be faded out by using the fadeToggle() method. In this topic, we are going to learn about JQuery fadeToggle.
Syntax for JQuery fadeToggle() method
In simple words, we can say that the fadeToggle() method is used to change the opacity of the elements. The fadeToggle() method syntax in the JQuery.
Syntax:
$(selector) .fadeToggle( [speed][,easing] [,function()])Parameters
- Speed: The speed can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the speed is 400 milliseconds. It can take slow, fast or normal as a string parameter. This helps us to control the animation based on our requirements.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Function: An optional callback function will be executed when the animation is completed.
It can take many other options as parameters also. Some of them are:
- Queue: The queue takes the Boolean value. If the Boolean value is true it indicates whether to place or not to place the animation. If the Boolean value is false the animation will take place immediately.
- Complete: This function is called once the animation is completed on an element.
- Start: This function is called when the animation on an element begins.
- Done: This function is called when the animation on an element is complete.
- Fail: This function specifies when the animation fails to complete.
- Step: For each step in the animation it specifies the function to be executed.
Examples of JQuery fadeToggle
Here are the following examples of JQuery fadeToggle mention below
Example #1
This is a simple example of the fadeToggle() method. In this example, we are fading in or fading out the box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of fadeToggle() in jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#square").fadeToggle();
});
});
</script>
</head>
<body>
<button id="btn">Click to fadein or fadeout box</button>
<div id="square" style="background:blue;height:100px;width:100px;margin:6px;"></div>
</body>
</html>Output:
- In the output, the fadein or fade out of the box will be taking place by clicking on the click to fadein or fadeout box
- Before clicking on the button it is displaying the box.
- After clicking on the button we can observe that the box is faded out.
- Again by clicking on the button we observe that the box is faded in as we can see it in the below image.
Example #2
In this example, we are passing the “slow” for the speed parameter for the paragraph1 (p1) and “seconds” for the speed parameter for the paragraph2 (p2).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of fadeToggle() in jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#p1").fadeToggle("slow");
$("#p2").fadeToggle(5000);
});
});
</script>
</head>
<body>
<button id="btn">Click to fadein or fadeout paragraph</button>
<p id="p1"> This is an example demonstrating the fadein or fadeout effects
of the paragraph by using one of the parameter i.e., speed by using string parameter</p>
<p id="p2"> This is an example demonstrating the fadein or fadeout effects
of the paragraph by using one of the parameter i.e., speed expressed in milliseconds</p>
</body>
</html>Output:
- Before clicking on the button click to fadein or fadeout paragraph the output is as shown below.
- After clicking on the button click to fadein or fadeout paragraph in the output we can observe in paragraph 1(p1) in the program we provided the parameter speed as “slow”. It will slowly get fades out. In paragraph 2(p2) in the program we provided the parameter speed as 5000 milliseconds it will slowly get fades out. As we can see it in the below figure.
- After 5000 milliseconds it will be completely faded out.
- Again by clicking on the button click to fadein or fadeout paragraph in the output we can observe that it is slowly getting fade-in. As we can see it in the below figure.
- After 5000 milliseconds it will be completely faded in as shown below.
Example #3
This is an example of the JQuery fadeToggle() method with the callback function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#div1").fadeToggle(5000, function(){
alert("The fading effect is completed.");
});
});
});
</script>
</head>
<body>
<button id="btn">Click to fadein or fadeout box</button><br><br>
<div id="div1" style="width:50%;height:50px;background-color:Blue;text-align:center;">
<a style="line-height:50px;">Example for the JQuery fadeToggle() method</a>
</div>
</div>
</body>
</html>Output:
- This is an example of using the callback function. As we can see initially it displays the output with the text inside the box.
- After clicking on the button click to fadein or fadeout box in the output we can observe that it is getting slowly faded out due to speed parameter is set as 5000 milliseconds as we can see it in the below figure.
- After it completes the 5000 milliseconds it will completely get faded out.
- As we have provided the alert message by using the callback function. So once the box is completely faded out the alert message will be pop-up displaying the message “The fading effect is completed” as shown in the below figure.
- Again by clicking on the button click to fadein or fadeout box in the output we can observe that it is getting slowly fade-in due to speed parameter is set as 5000 milliseconds as we can see it in the below figure.
- Once the box is completely fade-in the alert message will be pop-up displaying the message “The fading effect is completed” as shown in the below figure.
So these are some of the examples of the JQuery fadeToggle() method by using some of the parameters of this method.
Recommended Articles
This is a guide to JQuery fadeToggle. Here we discuss the examples to fade in or fadeout or toggle between the selected elements in Jquery. You may also have a look at the following articles to learn more –
