Have you ever been to a website and seen HTML elements slide into place? Many websites use this effect to show menus; you click on your profile image and a menu slides down revealing different settings and options that you can change. These sites are likely using jQuery sliding effects.
By using sliding effects, an element on your web page will slide up or down into place instead of appearing or disappearing. Just like with the other effects, sliding can be applied to any element on your page whether it be an image, a video, or text.
Sliding methods are animations; they happen over a period of time. As a result, sliding methods have an optional parameter to determine how long the animation will take.
In the above code, we call the .slideDown() method on the elements of class menu-content whenever menu-button elements are clicked. The slow parameter determines the speed of the animation. That code will produce something that looks like this:
The menu-button element is clicked and the menu-content element slides down into place
There are two other sliding methods in jQuery Effects. Use the documentation to find their names and read about their usage. One is used to slide elements up, and the other is used to toggle sliding effects.
Instructions
We’ve added a third image and three more buttons to our chart. We’re going to make each button apply a different slide effect to that image. Inside the first new event handler, target the third image by its class slide-image and call the .slideUp() method on it. Let’s make it slide up really quickly; use 100 as the parameter. Test that button!
For the event handler connected to the button of class down-button, call .slideDown() on the .slide-image element. Remember to target the image based on its class!
Let’s have the image slide down slowly. Use 'slow' as the parameter.
Finally, inside the final event handler’s callback function, call .slideToggle() on the image of class slide-image. For this method, don’t give it any argument. Remember, the argument is optional! If you don’t enter anything, it will default to 400. Test all three of your buttons.