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

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:

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