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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0