Introduction:

In this article we will explain how to  hide elements using fadeOut() in jQuery or What is fadeOut() method in jQuery or why use fadeOut() method in jQuery with example.

Description:

The jQuery fadeOut() method is used to fade Out all matched elements. It’s change the opacity to 0 of selected elements , from visible to hidden (fading effect) and set the inline style display:none.

Syntax:

$(selector).fadeOut(speed ,callback) 

Let’s see simple jQuery fadeOut() method with Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery fadeOut method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeOut();
            });
        });
    </script>
</head>
<body>
    <button>Click to fade Out box</button><br><br>
    <div id="div1" style="width:400px;height:80px;background-color:red;"></div><br>
</body>
</html>

In above example we have a “div” and button when we click on button then “div” will be  hide.

 Let's check live example

comments


Leave a comment

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

You may also like