Hiding elements using jQuery

In this lesson, you will learn how to hide an element on a web page using jQuery.

Introduction

The signature of the hide() function is:

hide( [duration [, easing] [, call back function ]] )

All of these parameters are optional. Duration could be a string (slow, normal, fast) or a number(a representation of time in milliseconds) determining the time of the effect will take to complete.

Easing is a string representing which teasing function you want to use for the transition.

The last parameter is your call back function, which is called when the effect is completed. With no parameters, the hide() function is the simplest way to hide an element:

$('element').hide();

The selected element will be hidden without any delay or animation effect. This is similar to setting the display value of the element as none:

$('element').css('display', 'none');

With the hide() function, the value of the display property is saved in the jQuery’s data so it can be restored later. If an element has a display value of inline and was hid using this function, it will be displayed as an inline element if shown again.

Easing function determines the speed at which the animation progression happens at various points within the animation timeline. The default easing function is called swing, and the other function is called linear, which makes the animation progress at a constant speed.

The call back function is executed once the animation has completed. This can be useful if you want a sequence of animations to happen together in a sequence.

Example of hiding elements using jQuery

This example has two elements worth mentioning – An image inside a div with a class called quote and a hyperlink. Once you click on the link ‘Hide the image’, the image will be hidden immediately, and hyperlink text will be changed to ‘Show the Image’.

The HTML

<div id="container">
<div class="quote"><img src="https://serving.photos.photobox.com/420588101daa7d26b4ebc39c032ab3e32a135fd9b0d142bd5a5f5cfdf8784dc19275ca26.jpg" alt="quote"> </div>
<p> <a href="#" id="hide">Hide the image</a> </p>
</div>
</div>

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" > < /script> 
<script >
    $(document).ready(function() {
        $('#hide').click(function() {
            event.preventDefault();
            $('.quote').hide();
            $('#hide').text('Show the image');
        })
    }); 
</script>

This code only explains how you hide an element using jQuery. In the next lesson, you will learn how to show the hidden image. If you have any question or find the text hard-to-understand, please leave your comment in the section below.

jQuery Effects

Tutorial Home

jQuery Showing Elements