jQuery slideUp() Method

Last Updated:

jQuery slideUp() Method

The jQuery slideUp() method hides the matched elements with a slideUp effect.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery slideUp() Method</h1> <button id="mySlideUp">Slide Up</button> <button id="mySlideDown">Slide Down</button> <script> $(document).ready(function(){ $("#mySlideUp").click(function(){ $("p").slideUp(); }); $("#mySlideDown").click(function(){ $("p").slideDown(); }); }); </script> </body> </html>

Syntax

$(selector).slideUp(speed, easing, callback);

Parameter Values

ValueTypeExplanation
speed Optional Specifies the speed of the slideUp effect.
Default value is 400 milliseconds.
Possible values are
  • "slow"
  • "fast"
  • milliseconds
easing Optional Specifies the easing function to use for the transition.
Default value is "swing"
Possible values are
  • "swing"
  • "linear"
callback Optional Specifies a function to be called once the slideUp() medthod is completed.

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
slideUp()YesYesYesYesYesYesYesYesYesYesYesYesYes

slideUp() with Speed

In the following example, we will specify the speed of the slideUp effect to 2000ms (2 seconds).

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery slideUp() Method</h1> <button id="mySlideUp">Slide Up</button> <button id="mySlideDown">Slide Down</button> <script> $(document).ready(function(){ $("#mySlideUp").click(function(){ $("p").slideUp(2000); }); $("#mySlideDown").click(function(){ $("p").slideDown(); }); }); </script> </body> </html>

slideUp() with Easing

In the following example, we will specify the easing function for slideUp() method to linear.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery slideUp() Method</h1> <button id="mySlideUp">Slide Up</button> <button id="mySlideDown">Slide Down</button> <script> $(document).ready(function(){ $("#mySlideUp").click(function(){ $("p").slideUp(2000, "linear"); }); $("#mySlideDown").click(function(){ $("p").slideDown(); }); }); </script> </body> </html>

slideUp() with Callback

In the following example, we will call a function (myFunction) once the slideUp effect is finished.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery slideUp() Method</h1> <button id="mySlideUp">Slide Up</button> <button id="mySlideDown">Slide Down</button> <script> $(document).ready(function(){ $("#mySlideUp").click(function(){ $("p").slideUp(2000, "linear", function(){ alert("slideUp() method completed"); }); }); $("#mySlideDown").click(function(){ $("p").slideDown(); }); }); </script> </body> </html>

Share this Page

Meet the Author