Introduction:

In this article we will explain how to use fadeToggle() Method in jQuery or What is fadeToggle() Method or why use fadeToggle() Method in jQuery with example.

  • Description:

  • jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods.
  • If the elements are faded in, it will make them faded out and if they are faded out it will
  • make them faded in.  

 

Syntax:

$(selector).fadeToggle(); 


  • Example of fadeToggle() method

 

 <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle();             });
        });
    </script>
</head>
<body>
    <p>See the fadeToggle() method </p>
    <button>Click to fade Toggle boxes</button><br><br>
    <div id="div1" style="width:300px;height:80px;background-color:chocolate;"></div>     
</body>
</html>


OutPut:

fadetoggle function in jquery

jQuery  fadeToggle () Method (speed  parameter)

The fadeToggle() method also take speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

<script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle("slow");
            });
        });
</script>

OR 

<script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle(2000);
            });
        });
</script>

jQuery  fadeToggle () Method (callback function)

 It is also an optional parameter. It specifies the function to be called after completion of fadeToggle() effect.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle("fast", function () {
                    $("#log").append("<div>finished</div>");
                });
            });
        });
    </script>
</head>
<body>
    <p>See the fadeToggle() method callback example.</p>
    <button>Click to fade Toggle boxes</button><br><br>
    <div id="log"></div>
    <div id="div1" style="width:300px;height:80px;background-color:chocolate;"></div>    
</body>
</html>

OutPut

fadetoggle function in jquery

I hope this will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like