Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the hallmarks of modern web applications, if you have used the web at all recently, you have probably noticed that there is a lot of great animation and effects on these modern web pages. And it used to be that you had to use plug-ins to achieve a lot of these animation effects. Well, jQuery makes providing animation and effects easy to uses of your site. And in fact in many cases you can do some pretty neat things with just one or two lines of code.
And that's going to be the subject of this chapter. So the jQuery library as I noted supplies some basic animation and effects functions to create some visual effects that are pretty common in modern web pages, such as showing and hiding elements, fading elements in and out, moving them around on the screen. There is also a basic animation function that you can use to build your own animation effects, and we will see how to do that later on in the chapter.
But first, let's just get started with some really simple animation and that involves showing and hiding elements. So showing and hiding elements are probably one of the most simple effects that you can use in jQuery. And you can exercise some pretty nice control over how elements are shown or hidden. They can happen immediately or over a specified duration of time. And you can see in the table there is a series of functions you can use. So not surprisingly, the show() functions show elements, the hide() functions hide elements.
And then there is a set of toggle() functions, and these basically do what you'd imagine, they show something if it's hidden and they hide something if it's shown. And there is a couple of different ways of doing each one of these. The most basic show() function simply displays each one of the elements that come back from a selector if they are hidden, and that just shows them. The next version though allows you to specify the speed with which things happen, and you can either pass a string like slow, normal, or fast or you can pass a number, which is a millisecond duration.
So 2000 milliseconds would be 2 seconds. And there is an optional callback that you can have jQuery call when the animation has become complete. So for example, when an element is finished showing, if you want to do some of the UI changes, you can supply a callback function that will be notified when the effect is done. The same thing for hide. There is the speed and callback function. And same thing here with toggle, the speed and callback. And this one here, the switch basically pass true or false and it either hides or shows everything based upon whether they are hidden or shown.
So now that we have seen what some of the functions are, let's jump over to the code and try some of these out. So here I am in the browser and you can see I have got a nice big blue div and I have got some buttons down here that trigger some functions. So it's currently visible, so if I click Show, nothing happens. But if I click Hide, you can see that the element goes away. If I click Show, it brings it back. And if I click Toggle, Toggle just does the opposite of whatever it currently is. That's pretty basic.
Now let's look at the code to see how that's happening. So I am going to bring this up in my editor. Before we look at the code, just take a look at the Design view. So here is the Design view, you can see here is the element, that's the div and here are the various buttons, so let's go to the Source. So down here in the Source, this is div right here. And here are each one of the buttons, and the buttons have various id's on them and up here you can see that the div has a style sheet applied to it that has some appearance.
And up here in the script, and you can see that when the browser loads the page, I am assigning some click handlers to each one of the buttons. So the Show button gets the show() function, the Hide button gets the hide() function, and so on. So what I am doing here is passing various parameters to the function. So for show, I am passing in a speed of normal but I can also pass in a speed of something like slow, right. And if I go back to the browser, I will refresh.
I am going to hide it and now when I click Show, you can see it comes in a little bit slower. But I can actually slow that down a lot more. Let's go back to the code. So instead of passing slow, what I will do is I will pass in a duration of 5 seconds, and I will pass in a callback that tells me that the animation is complete. And for the callback, I will just say alert("done showing"). So let's go back, save.
Let's go back to the browser, let's refresh. Now I am going to Hide it, and now when I click Show, you see it comes in very slowly over 5 seconds. And there is my alert that says hey, all done showing. That's pretty much it for hiding and showing elements. Let's look now at how we would fade elements in and out, another very common effect.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100044 Viewers
56 Video lessons · 113102 Viewers
71 Video lessons · 81953 Viewers
131 Video lessons · 39320 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.