jQuery FadeToggle Effect – fadeIn fadeout

jQuery fadeToggle(fade in and out ) animation effect method; In this tutorial, you will learn how to use fadeToggle(fade in and out) animation effect method with HTML elements.

jQuery FadeToggle Animation Effect Method with Example

The jQuery fadeToggle() method allows you to smoothly toggle the visibility of selected elements by adjusting their opacity. If the elements are currently visible, calling fadeToggle() will gradually decrease their opacity, resulting in a fade-out effect. Conversely, if the elements are currently hidden, fadeToggle() will gradually increase their opacity, causing a fade-in effect.

Syntax of jQuery FadeToggle Animation Effect Method

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

Parameters of jQuery FadeToggle Animation Effect Method

  • speed :- The argument ‘speed‘ determines the duration of this effect. Its possible vales are slow, fast and milliseconds.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- This is an optional parameter. you can specify what to do after the fadeIn() method is called.

Example of jQuery FadeToggle Animation Effect Method

In the below example you can see that fadeToggle() method effect.

<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeToggle Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#first").fadeToggle();
        $("#second").fadeToggle("slow");
        $("#third").fadeToggle(3000);
    });
});
</script>
</head>
<body>
<p>You can ee the fadeToggle() method</p>
<button>Click here for fade toggle</button><br><br>
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="third" style="width:100px;height:100px;background-color:green;"></div>
</body>
</html>     

In this above example of fadeToggle() method, you can see that fadeToggle() effect on html elements

Example of jQuery FadeToggle Animation Effect Method Callback

<!DOCTYPE html>
<html>
<head>
<title>jQuery FadeOut Method</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#first").fadeToggle();
        $("#second").fadeToggle("slow");
        $("#third").fadeToggle(3000,function(){
        	alert("The fade-toggle effect is completed click again on button.");
        });
    });
});
</script>
</head>
<body>
<p>You can ee the fadeToggle() method</p>
<button>Click here for fade toggle</button><br><br>
<div id="first" style="width:100px;height:100px;background-color:yellow;"></div><br>
<div id="second" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="third" style="width:100px;height:100px;background-color:green;"></div>
</body>
</html>   

Recommended jQuery Tutorials

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *