Explain about fadeout method in JQuery also expain the example.

0 votes
51 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

Explain about fadeout method in JQuery also expain the example.

1 Answer

1 votes
Ravi Vishwakarma answered 29-Jul-2021 by Ravi Vishwakarma
jQuery fadeOut() Method
The jQuery fadeOut() method is used to fade out a visible element.
Syntax:

$(selector).fadeOut(speed);
$(selector).fadeOut(speed,callback);
Speed and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. Callback function to be called after completion of fadeOut().
<!DOCTYPE html>

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script>
        $(document).ready(function () {
            $('button').click(function () {
                $('#div1').fadeOut();
                $('#div2').fadeOut('slow');
                $('#div3').fadeOut(3000);
            });
        });
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius:25px;
            text-align:center;
            color:white;
        }
    </style>
</head>
<body>
    <button>Click to fadeOut boxes</button><br>
    <br>
    <div id='div1' style='background-color:black;'>
        black
    </div>
    <br>
    <div id='div2' style='background-color:blue;'>
        blue
    </div>
    <br>
    <div id='div3' style='background-color:red;'>
        red
    </div>
</body>
</html>
Explain about fadeout method in JQuery  also expain the example.