jQuery Fade Toggle Function Method


jquery jQuery Fade Toggle Function Method Jquery Button Click

How to toggle the fading using jQuery fade function?

Basically the fading is the appearing and disappearing the content or section gradually. While toggle means if already appeared then set it to fade out and similarly if already not appeared then appear it with fade in. We mostly perform toggling with button click.

Syntax of jQuery fadeToggle() function

$("TagSelector").fadeToggle("OptionalTimeParameter"); // Syntax $("#mydiv").fadeToggle("slow"); // Example Lets discuss full detail example that we show that how actually the toggle fading works.

jQuery fadeToggle() function

We will call a jQuery fade Toggle function on button click and fade in and out the div section with id="mydiv".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mydiv"> You are at the CodingPK jQuery Fade Toggle tutorial. Just follow the Chapter Sequence to learn jQuery programming. </div> <button id="mybutton">Click Me to Toggle Div Fading</button> <script type="text/javascript"> $("#mybutton").click(function(){ $("#mydiv").fadeToggle("6000"); }); </script>

Output of jQuery fadeToggle()

You are at the CodingPK jQuery Fade Toggle tutorial. Just follow the Chapter Sequence to learn jQuery programming.

Note ! fadeIn() , fadeOut() , fadeToggle() functions parameter is optional , you can pass null value or time value. For example

  • fadeToggle("") with no parameter.
  • fadeToggle("2000") with parameter 2 seconds.
  • fadeToggle("slow") with parameter slow.
Where 1000 = 1 second.

jquery Jquery Button Click Chapter Next »