Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The sliding effect is yet another way that jQuery gives you to reveal or hide page elements. These functions are not for sliding things around on the screen, just doing some generic movement. This is for showing and hiding elements but using a sliding effect. jQuery provides functions for sliding elements up or down, as well as toggling the slide animation based upon whether things are hidden or showing.
And you've probably seen this effect before in web pages, where you click an Option button and things kind of slide into views seemingly from thin air, and that's how this effect is achieved in jQuery. The slideDown function allows me to specify the speed at which the slide animation happens and there is an optional callback function that will be called when the slide is completed, and the same thing for slideUp. I can specify the speed and speed can either be a string like slow or normal or fast or I can specify a number of milliseconds that I want the animation to happen over.
And SlideToggle is the same idea. It just toggles whether things are sliding up or sliding down based upon whether they are already showing. Let's take a look at the sliding examples. I am going to jump over to the code. So here is the file in the browser and I've got the big blue div right here. And I've have got some buttons that trigger some behavior. So it's already visible, so lets slide it up, and see that it slides out of view, and sliding down makes it visible, and when I try to hit Slide Down again, nothing happens because it's already visible and similarly Slide Up there is nothing once it's hidden.
The Toggle behavior however is, well, it just simply takes it from whatever state it's currently in and brings it to the opposite state. So let's take a look at the code, and see how that happens. I am going to open this up in my editor, so let's scroll down really quick before we see the code. Here are the buttons that are controlling the behavior. You can see these IDs on them, and this is the div right here and the div has a style applied to it, which sets its initial appearance, these are all the styles I have on my div.
So let's scroll back up. So, when the page loads and the document is ready, I set up some event handlers. So, for the slideUp button, I assign a click() function that calls the slideUp function on the div and for the slideDown button I call the slideDown function. And for toggle the same idea, I call the slideToggle. So, let's have a little bit of fun with this. We can take out the normal here, and I can put in something kind of slow like 4 seconds, so 4000 milliseconds is 4 seconds.
And I can also define a function that will be called when the slide up is complete. So I am just going to display an alert that says slide complete, and again, you would do this if you had some UI that you wanted to manipulate or otherwise control when the effect was done with. So, now I am going to save and jump to the browser again. Now, I am going to refresh. You can see that the Toggle Slide still works pretty smoothly, but when I Slide Up, it's going to slide up very slowly over 4 seconds and then show my alert.
So, let's make sure that works in Firefox as well. Open this in Firefox, just to prove it's cross-browser. So, here is the same file. You can see toggling works, and I am going slide up very slowly over 4 seconds and there is the alert. So, that's a quick summary of the jQuery sliding functions and using those functions, you can easily slide elements into and out of view.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92594 Viewers
82 Video lessons · 104156 Viewers
71 Video lessons · 75697 Viewers
56 Video lessons · 107087 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.