Hiding Elements in the Layout With jQuery .hide() Function

jQuery hide: Main Tips

• jQuery .hide() might not have an animation due to included parameters.
• This method makes jQuery hide elements.

Basic Hiding Command

The .hide() jQuery method hides a selected element. In the example below, you can click a button to make jQuery hide div element:

$("button").click(() => {
    $("div").hide();
});

This method works without any parameters, but then it creates no animation effect. To do that, you need to follow this syntax:

$("selector").hide(length, easing, callback);

There are three parameters for hide jQuery method:

• length can be a number of milliseconds the animation lasts. It can also be a keyword such as slow (600 ms) or fast (200 ms). If omitted, the default value is 400.
• easing is defined by two keyword values: linear for consistent animation speed, and swing for speeding up in process.
• callback is the name of the function to run once the animation ends.

Note: if an element is hidden using jQuery .hide(), it will not be displayed at all, as if removed from the layout of the page.