Post
Ask Question

jQuery Effects - Slide

In the previous blog jQuery Effects - Fade, we learned the Fade effect in jQuery. Slide effect is similar to fade effect. If you are completely new to jQuery, I would request you to go through:
  1. jQuery Library
  2. jQuery Syntax
  3. jQuery Events
  4. jQuery Effects
  5. jQuery Effects - Fade
Slide effect helps us slide the elements up and down. There are three slide effect methods used in jQuery:
  1. slideDown() - Slides down an element.
  2. slideUp() - Slides up an element.
  3. slideToggle() - Toggles between slide down and slide up.
Let us see an example to understand the slide effect in a better way.
  1. <html>      
  2. <head>      
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>      
  4.     
  5. <script>      
  6.    $(document).ready(function(){      
  7.       $("#sDownBtn").click(function(){      
  8.          $("#div1").slideDown();      
  9.       });      
  10.       
  11.       $("#sUpBtn").click(function(){      
  12.          $("#div1").slideUp();      
  13.       });      
  14.       
  15.       $("#sToggleBtn").click(function(){      
  16.          $("#div1").slideToggle();      
  17.       });      
  18.        
  19.    });      
  20. </script>      
  21.     
  22. </head>      
  23.     
  24. <body>      
  25.       
  26. <button id="sDownBtn">Slide Down</button>      
  27. <button id="sUpBtn">Slide Up</button>      
  28. <button id="sToggleBtn">Slide Toggle</button>      
  29.      
  30.     
  31. <br><br>     
  32.      
  33. <div id="div1">      
  34. This division will be affected when you click any buttons. Initially, slide down won't work as the division is already visible.   
  35. First try Slide Up and then Slide Down and finally see the magic of toggle.      
  36. </div>      
  37.       
  38. </body>      
  39. </html>   
Output
 
 
Code Explained

The logic is similar to what we have seen in jQuery Effects - Fade. We are selecting the buttons using their ID, and then, assigning a function to it. Within the function, the division with "div1" ID is selected and the respective slide effect is applied to it.

Please try the above code snippet and try to do variations in the parameters of the slide methods. You can specify "slow", "fast", and time in the milliseconds as a parameter to the slide effect method and observe the output.

You would observe that all the effects have similar syntax. The only difference is their usage at the correct place and correct time.
Next Recommended Reading Blink Effect With JQuery