Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Another Way to Hide an Element: jQuery .slideUp() Method

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

jQuery slideUp: Main Tips

  • The jQuery .slideUp() function hides an element with a slide up animation.
  • To reveal it with a slide down animation, use this method.

Usage of .slideUp() Method

The jQuery .slideUp() method conceals the specified element with a slide up animation.

In the example below, .slideUp() method is triggered by a hover event:

Example
$("button").hover(() => {
    $("img").slideUp();
});

The .slideUp() jQuery syntax is as follows:

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

Let's review the three possible arguments:

  • length defines the animation's duration in milliseconds (400 by default). Keywords slow or fast can also be used for 600 and 200 ms.
  • easing defines if the speed of an animation is swing (default value) or linear.
  • callback specifies a function to fire after the slideUp jQuery animation.

Note: an element hidden by using jQuery slide up method will not be displayed at all, as if it was removed from the layout of the page.