We have talked about jQuery a lot over the past months, and even more since the humble beginnings of Switch On The Code. There are many reasons for this, and I am sure we all can agree that jQuery is just awesome. From its simple way of grabbing DOM elements down to its powerful extensions that make the possibilities effectively endless. But there is one thing we have covered yet… jQuery Animations.
None
Slow
Fast
10ms
100ms
200ms
400ms
800ms
Animation:
Show
Hide
Slide Up
Slide Down
Fade In
Fade Out
Move Left
Move Right
In past tutorials, we have looked at a few of the simple animations that you can do with jQuery, and more specifically the show and hide. We have also seen the slideUp and the slideDown a few times. However, in this tutorial we will go over all four, plus some more, just in case you missed those or forgot about them. So without further blabber, let’s get started.
Animations can be any number of fancy things, and most often we think of a complex string of frames that are played in rapid succession to give up the illusion of motion. Now, film school definitions aside, in jQuery a good portion of your animations will deal with showing and hiding your elements in some neat way. This could be throwing it from off screen onto the screen, or sliding it down from nowhere, or even making it appear out of thin-air. The fact remains, though, that most of the time you will be merely showing or hiding the elements in question.
Show/Hide
On the most basic level you have two functions that are technically not animations, but do “show” and “hide” your elements, and yep, you guessed it, they are called show and hide. All you have to do is call either on an element to perform the subsequent action:
$(‘#element’).hide();
Pretty easy, right? I would get very use to seeing those two, because they are the foundation for advanced jQuery development. Showing and hiding are used in just about every rich application on the web.
The neat thing is that these two, normally not-so-animated functions, can become animation functions when a “duration” is passed into them. This duration can be a string (“slow” or “fast”) or a number representing the length of the animation (in milliseconds), and all animation functions can take a duration. When a duration is passed in, show and hide actually animate the width, height, and opacity of an element at the same time.
$(‘#element’).hide(‘slow’);
$(‘#element’).show(200);
$(‘#element’).hide(10);
Take a close look here. This is what most of your animating will look like. Calling a function on an element and passing in a duration. All standard jQuery animation functions work in the same way, allowing you to use “fast”, “slow”, or a millisecond duration. However, unlike show and hide, all the other animation functions will default their duration and still animate without anything being passed in.
Sliding and Fading
Moving on to our first real animation, we have the “slide”. A slide animates the height to give the illusion that an element is “sliding” away or into existence. A very interesting animation indeed. Just like the example above, there are two functions for sliding, one to show and one to hide. slideUp hides an element by reducing its height until it reaches 0. slideDown increases its height until it reaches its calculated or given height. If the element is already shown, slideDown does nothing, and vise-versa for slideUp.
$(‘#element’).slideDown(‘slow’);
$(‘#element’).slideUp(200);
$(‘#element’).slideDown(10);
Simple enough. But sliding isn’t for everyone, and thankfully jQuery has another pair of functions to handle fading. Fading works by scaling the opacity to and from 0. The two functions for fading are, you probably guess them, fadeIn and fadeOut. It is probably also a lot more obvious which one hides the element (fadeOut) and which one shows it (fadeIn). Just like sliding, the syntax is extremely simple.
$(‘#element’).fadeIn(‘slow’);
$(‘#element’).fadeOut(200);
$(‘#element’).fadeIn(10);
And that are the two quick-style animations that jQuery currently offers. However there is another function we can use…one that is all powerful…one that will allow us to become…..Masters of the Universe!
The Animate Function
Ok, so honestly there is a very slim chance that this jQuery function will fill you with all the power of Grayskull, but it sure does a lot of cool stuff when it comes to animation. If fact, it can do just about anything you want. To keep the scope of this tutorial less than a law briefing, we are going to go over just one way to animate with it.
The animate function takes in a lot of different combinations of things. However, the most important is the first argument, which never changes. The first argument that you pass into it is what you are animating. This could be its position, its color, its opacity, or even its size, the possibilities are endless. You actually pass in a map of css properties to animate, so if it’s in css, you can animate it. For this example we are going to nudge our element back and forth, i.e. its position.
The first thing to remember is that anytime you are modifying the position of an element, you have to change the css position property of the element in question. Even if you just change it to use the position of “relative”, it needs to be something you can apply a left and top property to. As long as you can position the element with css, you are good to go.
So the plan is to move our element left and right, by 50 pixels or so. In order to do this, we have to animation the left property by +/- 50 pixels. This is what our animation call would look like for a basic position shift:
elm.animate({"left": "-=50"});
As you can see, it is just as simple as our slide and fade calls, except we are missing our speeds. Of course jQuery is not going to leave us without a way to set that, and in fact it is the optional second argument for this function.
elm.animate({"left": "-=50"}, 1000);
Thats right, you can specify speed just like the other functions we looked at. You can use “fast”, “slow”, or a number. Anywhere from 10 milliseconds to 100 seconds, it’s up to you.
So this is how you move an element left or right with the animate function. Remember, you can animate any css property, so the possibilities are truly endless.
Well, these are the basics to animating things in jQuery. If the built-in animations don’t do it for you, you can always use the versatile animate function. They are all fun to watch in action and they always add that needed flair. Just remember, we you need coding help, all you have to do is Switch On The Code.