Slide effect helps us slide the elements up and down. There are three slide effect methods used in jQuery:
- slideDown() - Slides down an element.
- slideUp() - Slides up an element.
- slideToggle() - Toggles between slide down and slide up.
Let us see an example to understand the slide effect in a better way.
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-
- <script>
- $(document).ready(function(){
- $("#sDownBtn").click(function(){
- $("#div1").slideDown();
- });
-
- $("#sUpBtn").click(function(){
- $("#div1").slideUp();
- });
-
- $("#sToggleBtn").click(function(){
- $("#div1").slideToggle();
- });
-
- });
- </script>
-
- </head>
-
- <body>
-
- <button id="sDownBtn">Slide Down</button>
- <button id="sUpBtn">Slide Up</button>
- <button id="sToggleBtn">Slide Toggle</button>
-
-
- <br><br>
-
- <div id="div1">
- This division will be affected when you click any buttons. Initially, slide down won't work as the division is already visible.
- First try Slide Up and then Slide Down and finally see the magic of toggle.
- </div>
-
- </body>
- </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.