jQuery Effect hide() Method

Quiz

The hide() method in jQuery is used to hide the selected elements by animating their opacity and dimensions. When called, the hide() method animates the opacity and dimensions of the selected elements to zero over a specified duration, making them visually disappear. The elements are still present in the DOM but are they'll not visible to the user.

This method works similar to the CSS property "display:none".

To display the hidden elements on the DOM, we need to use the show() method.

Syntax

Following is the syntax of hide() method in jQuery −

$(selector).hide(speed,easing,callback)

Parameters

This method accepts the following optional parameters −

speed (optional): A string or number determining how long the animation will run. Default is "400" (milliseconds).
easing (optional): A string specifying the easing function to use for the transition. Default is "swing".
callback (optional): A function to call once the animation is complete.

Example 1

In the following example, we are using the jQuery's hide() method to hide the <div> element −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hideButton").click(function(){
                $("#content").hide();
            });
        });
    </script>
</head>
<body>
    <button id="hideButton">Hide Content</button>
    <div id="content">
        <p>Click the above button to hide this content.</p>
    </div>
</body>
</html>

When the button is clicked, the hide() method hides the <div> element.

Example 2

In this example, we are using the jQuery's hide() method with a specified "speed" parameter −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hideButton").click(function(){
                $("#content").hide(1000);
            });
        });
    </script>
</head>
<body>
    <button id="hideButton">Hide Content</button>
    <div id="content">
        <p>Click the above button to hide this content.</p>
    </div>
</body>
</html>

If we click on the "Hide Content" button, it hides the paragraph inside the div with a custom animation duration of 1 second.

Example 3

The following example uses the jQuery's hide() method with a callback function to execute after the content is hidden −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hideButton").click(function(){
                $("#content").hide("slow", function(){
                    alert("Content is now hidden.");
                });
            });
        });
    </script>
</head>
<body>
    <button id="hideButton">Hide Content</button>
    <div id="content">
        <p>This is the content to be hidden with callback function.</p>
    </div>
</body>
</html>

After clicking the "Hide Content" button, it hides the paragraph inside the div with a slow animation. After the content is hidden, an alert message pops up to notify the user.

jquery_ref_effects.htm

Print Page