JQuery Hide() Method | Explained

jQuery which is a JavaScript library makes tasks like animation, event handling, or Ajax very easy. These are some tasks that would usually take multiple lines of code to be achieved, but jQuery provides certain methods that can fulfill these tasks in just a single line of code. Although, there are numerous amount of jQuery methods, however, in this guide we will stick to the jQuery hide() method and see how it works.

jQuery hide() Method

As the name suggests, the jQuery hide() method is used for the purpose of hiding specified elements. The elements that you hide using the jQuery hide() method will be completely invisible to the user.

Syntax

$selector.hide(parameter)

The different parameters that you can pass to the hide() method are as follows.

Parameter	Description
speed	This parameter describes the speed of the hide effects. It can exhibit values such as slow, fast, and miliseconds.
easing	This parameter describes the speed of an element at different animation points. It can exhibit values such as swing, and linear.
callback	It is a function that executes once the hide() method finishes.

Note: All of the above-mentioned parameters are optional.

Below we have illustrated some examples that will help establish a better understanding of the hide() method.

Example 1

This example demonstrates the hide() method by passing no parameter.

HTML

<h1>Click on the button below to hide this heading.</h1>

<button class="button1">Hide</button>

In the above HTML code two elements are being created <h1> and <button>. Now we will apply the jQuery hide() method on the <button> to hide the <h1> element.

jQuery

<script>

    $(document).ready(function(){

        $(".button1").click(function(){

            $("h1").hide();

        });

    });

</script>

Output

Before clicking on the “hide” button.

After clicking on the button, the heading will disappear.

Heading disappeared successfully and quickly.

Example 2

This example shows the working of speed parameter.

jQuery

<script>

    $(document).ready(function(){

        $(".button1").click(function(){

            $("h1").hide(900);

        });

    });

</script>

In the above example, we have passed 900 as a parameter to the hide() function which means once you click the button it will take only 900 milliseconds for the heading to disappear. The lesser the number of miliseconds the faster the heading will disappear and vice versa.

Output

The speed parameter is working properly.

Example 3

This example shows the working of callback parameter.

jQuery

<script>

$(document).ready(function(){

    $(".button1").click(function(){

        $("h1").hide(900, function(){

            alert("Hide() method has been successfully executed!");

        });

    });

});

</script>

In the above code snippet, along with the speed parameter we have also passed the callback parameter. Once the hide() method has been executed an alert message will also appear confirming the successful execution of the method.

Output

Before you click on the button.

After you click on the button.

The callback parameter is working properly.

Conclusion

The jQuery hide() method is used for the purpose of hiding specified elements. Once the elements are hidden they will completely disappear from the sight of the user. You can pass three parameters to the hide() function which are; speed, easing, and callback. All of these parameters are optional. The jQuery hide() method is explained in-depth in this guide along with examples that illustrate the usage of the different hide() method parameters.

from https://ift.tt/KWOQ8Rn