jQuery Tutorial

jQuery hide method to hide the element

hide method is used to hide or invisible the selected elements in the web page.

jquery hide syntax

$(selector).hide(speed of animation, easing, callback function)

In jQuery all the three parameters are optional for hide method.

Speed of animation

"fast" - hides the element faster.

"normal" - hides the element in normal.

"slow" - hides the element slower.

milliseconds - hides the element animation as based on specified milliseconds.

easing

"swing" - In middle of the animation is faster but slower in beginning and end of animation.

"linear" - Animation is consistent from beginning to end.

jQuery hide method example to hide the element

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery hide method</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").hide();
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btnHide" value="Hide"/>
    <div style="height:200px;width:200px;background-color:blue;color:white;">
        This div will be hidden!
    </div>
</body>
</html>

Output:

Shows div element

Hides div after clicking on hide button

hides the div after clicking on hide button

jQuery hide method with callback function

call back function is used to update the hidden div text when shows on clicking of hide button.

        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").hide(function () {
                   alert('call back function!');
                });
            });
        });

hides the div and invokes callback function after clicking on hide button

jQuery hide method with slow animation

jquery hide function is used to hide the div element with slow animation .

        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").hide("slow");
            });
        });

jQuery hide method with milliseconds animation

jquery hide function is used to hide the element with animation slower for 15000 milliseconds.

        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").hide(15000);
            });
        });

jQuery hide method with consistent speed

jquery hide function is used to hide the element with animation slower for 15000 milliseconds with consistent speed.

        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").hide("normal", "linear");
            });
        });

jQuery hide functionality without using hide method

css method is also used to hide the element.

        $(document).ready(function () {
            $('#btnHide').click(function () {
                $("div").css("display", "none");
            });
        });

« Previous Next »

jQuery Programming Examples