jQuery slideUp() Method

jQuery slideUp() method perform sliding up motion effect to hide the selected elements. The slideUp() method animates the height of the selected elements.

Syntax

This syntax represent to the slideUp() method

$(selector).slideUp( duration, easing, callback );
Parameter Type Description
duration Number
String		 Required. Accept string or number that determining how long the slide effect will run.
default value is 400
Accepted values:
  • Predefined duration ("slow", "normal", "fast")
  • number of milliseconds (3000, 1000)
easing String Optional. Specifies the which easing function to use for the transition.
default value is "swing"
Accepted values:
  • "swing" - elements moves slows at the starting and ending, but faster in the middle
  • "linear" - elements moves in a constant speed
callback Function Optional. A function to call once the the slide effect is complete.

Example

Here, in this example show slideUp() effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery slideUp() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#click").click(function(){
        $("#slide").slideUp("slow");
      });
    });
  </script>
  <style type="text/css"> 
    #slide, #click {
      font-family: Verdana;
      font-size: 14px;
      background: #CCCCCC;
      border: 1px solid #c3c3c3;
      text-align: center;
    }
    #slide {
      height: 60px;
    }
  </style>
</head>
<body> 
  <div id="slide">
    <p>This paragraph text represent slide panel text and it's running slide effect.</p>
  </div>
  <p id="click">Click me to slide down</p>
</body> 
</html>

Run it...   »