Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

3.4 Animation

Animation is important in modern web apps for adding polish and dynamism. Although CSS3 transitions are emerging as an alternative to JavaScript-based animation, in this lesson I'll show you how jQuery's built-in animation methods are still very useful.

3.4 Animation

Animation has become a very important part of our applications. Not from a functional standpoint as far as the application is concerned, but more for the user experience. It's just something that users now expect. And modern applications tend to rely more upon CSS transitions for animation. But there are still some times when we would want to use JavaScript and jQuery has several built-in methods that we can use to animate our elements. Now we are only going to be working with one element in this lesson, but keep in mind that everything that we talk about applies to any jQuery object. So whether or not if you select one element or select many elements, all of these methods will work. And of course that is true for any jQuery method, except if you are trying to get something. Okay, so we're going to start by hiding and showing our elements. So we're going to use our foo object and I'm going to call a method called hide. Now whenever I save this over on the right hand side, we see that, that element has been hidden. Now the hide method accepts multiple arguments. If you don't pass anything to it, then it is simply going to hide it, but you can also control how long the animation takes. You can also specify whether if it's a fast hiding or a slow hiding and that's really just about it. So we'll start with fast and slow. So you can pass a string value. It could be fast and you can see that it faded out rather quickly. If we say slow, then it's going to be a slow animation. But you can also specify the amount of milliseconds that you want the animation to take. So if we say 5,000 then that's going to be a very slow transition, but we see that it's taking five seconds to hide that element. And the same is going to be true for showing the element and you might expect that the name for that method is show and you would be correct. So this code is going to hide the method. Then it's going to show the method and it's going to take five seconds for each of those animations to occur and there we see the showing. So that's the first method, hide and show. But let's change this to be something a bit more quicker, because slow animations is never a good thing. Now one other thing about the animation for hiding and showing, if you look at the actual animation itself. Whenever you hide, it's actually fading out as well as performing a wiping animation and whenever you show it is fading in and wiping in. So it's not just a pure fade out and fade in. Now if you want a pure fade, then there is a method that you can use. Actually, there are several methods. The first is called fadeOut and as its name implies, it's going to fade an element out. So if we call that method and save it, we see that the method fades out and it takes the same arguments that the hide and the show method take. So we could specify a fast animation, or a slow, or we can also supply the amount of milliseconds that we want the animation to take. So if we wanted something to take one second, we would pass 1000 and we can see that, that takes about a second to run. So we have fadeOut, that means that we also have a fadeIn and it's the same type of thing. You can pass fast, slow, or the amount of milliseconds that you want that animation to occur. Now there's also a fadeToggle method. The fadeToggle method is a lot like toggling a class on and off. If it is faded out, it's going to fade in. If it has faded in then it's going to fade out, so let's say this. We're going to see that it fades out, it fades in then fades back out. And we have another fading method, one that is called fadeTo. And it's so that you can fade to a particular opacity, so it's not going to fade in all of the way, or fade out all of the way. It's going to start at whatever opacity it's at and then fade to whatever you set that opacity to. So we'll say fadeTo. Now the first argument is going to be the fast, slow, or the amount of milliseconds. Let's do 1000, so that's going to be a second and we're only going to fade to half opacity. So whenever we see this, we're going to see our text fade but not to go completely out, because it has stopped at half opacity. And as far as fading is concerned, that's all that there is. So you can fade out, fade in, you can toggle the fade or you can fade to a particular opacity. Now there's also a type of animation called sliding. You can slide down and slide up and in fact it's the same type of animation that's used with the hide and show. So hiding is a combination of fading out and sliding up, so let's look at sliding up first. So we're going to slideUp. Once again, the same type of arguments. The speed is going to be the argument that you would pass to the slideUp method. Now whenever we save this, we see that it wipes up. That's what that animation used to be called, but now it's called slideUp. There's also a slideDown which is used with the show animation, so we will slideDown. And we will see that animation and then finally there is a slideToggle. So it's going to slide up or down based upon its current state. So in this case it's going to slide up, slide down then slide back up. Now we could dive deeper into jQuery's animation capabilities because there are a few other methods that we could talk about. And we could perform some more complex animations. Let's also be a little realistic here. We are getting into the age of where CSS transitions are really what we should be using for animation. They are faster and more efficient. So we should use them as much as possible.

Back to the top