Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

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

Reading time 1 min
Published Jan 16, 2018
Updated Oct 2, 2019

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:

Example
$("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.