Javatpoint Logo

91-9990449935

 0120-4256464

JavaTpoint

jQuery slideUp()

jQuery slideDown() method is used to slide up an element.

Syntax:

  1. $(selector).slideUp(speed);  
  2. $(selector).slideUp(speed, callback);   
  3. $(selector).slideUp(speed, easing, callback);  

speed: It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.

easing: It specifies the easing function to be used for transition.

callback: It is also an optional parameter. It specifies the function to be called after completion of slideUp() effect.

Let's take an example to demonstrate jQuery slideUp() effect.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  5. <script>   
  6. $(document).ready(function(){  
  7.     $("#flip").click(function(){  
  8.         $("#panel").slideUp("slow");  
  9.     });  
  10. });  
  11. </script>  
  12.  <style>   
  13. #panel, #flip {  
  14.     padding: 5px;  
  15.     text-align: center;  
  16.     background-color: #00FFFF;  
  17.     border: solid 1px #c3c3c3;  
  18. }  
  19. #panel {  
  20.     padding: 50px;  
  21. }  
  22. </style>  
  23. </head>  
  24. <body>  
  25. <div id="flip">Click to slide up panel</div>  
  26. <div id="panel">Hello javatpoint.com!   
  27. It is the best tutorial website to learn jQuery and other languages.</div>  
  28. </body>  
  29. </html>  
Test it Now

Output:

Click to slide up panel
Hello javatpoint.com! It is the best tutorial website to learn jQuery and other languages.
Next TopicjQuery slideToggle()