Tutorial: Getting Started With jQuery Animations

DesignWoop welcomes this guest post by Alexandre Smirnov a web designer and developer who lives and works in Cal­i­for­nia.

jQuery. No doubt you have heard about this popular JavaScript library. It has taken the throne of all the JavaScript libraries out there because of its many features and easy syntax. Today, I will show you one of the simpler uses of jQuery: you can animate things. this will be the focus of today’s tutorial.

Before we begin, you should learn one very important thing: this next snippet of code.

The following snippet of code basically says, when the document is ready, do something:

[code lang=”js”]
$(document).ready(function(){
//Jquery code goes here
});
[/code]

This is important because if you don’t use it, jQuery could try to manipulate DOM elements that don’t exist yet. It wouldn’t be able to, and there would be complications.

Now that you know that, we can move on to the article’s focus.

A typical animate function:

[code lang=”js”]
$(‘#something’).animate({

});
[/code]

In order to animate something, you have to give it some parameters. For example what to animate, what the new value is, and how long you want the animation to take.

Let’s include the code that will actually make this work:

[code lang=”js”]
$(‘#something’).animate({
opacity: ‘0.5’
}, 120);
[/code]

View the demo

Opacity is what is being animated, and it’s being animated to 0.5. I’m also saying that I want it to take 120 milliseconds to complete. That is the meat of it – however, there are some more things you should keep in mind.

The built in jQuery animate function cannot animate strings. For example, you cannot animate an object from float: left to float: right without doing a lot of extra work. Likewise, you can’t animate colors. If I wanted to animate the color of an element, I would have to use jQuery UI.

Multiple Animations

If you are animating multiple things, you must use commas to separate them. A common mistake is to use a semicolon; Don’t do that!

Here’s what you should do:

[code lang=”js”]
$(‘#something’).animate({
opacity: ‘0.5’, //<– notice the comma
height: ’10’, //<– notice the comma
}, 120);
[/code]

View the demo

jQuery assumes by default that the value you are animating is in pixels, so if you are too lazy to write the “px”, you don’t have to. It is also possible to animate “em” and “%”.

Also, the jQuery selector syntax is much like CSS. Notice I have a number sign in front of the “something” text. That would work only if what I’m animating has an ID of “something”. If I wanted to animate all the elements with the class “something” on the page, I would do this:

[code lang=”js”]
$(‘.something’).animate({
opacity: ‘0.5’,
}, 120);
[/code]

Animate On Hover

Now, you know how to animate elements with jQuery. That’s useful, but what if we don’t want an element to animate the moment the page finishes loading? What if we want it to animate only when we hover over it? Take a look:

[code lang=”js”]
$(‘#something’).hover(function(){
$(this).animate({
opacity: ‘0.5’,
});
});
[/code]

View the demo

What this is saying is, “when you hover over #something, animate its opacity to 0.5. Also, keep this in mind: “$(this)” is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked. In this case, “$(this)” is equivalent to “$(‘#something’)”.

Using Callbacks

Now, back to animating. What if you don’t want it to stay that way, and want it to animate back to opacity: 1 when you hover off of “#something”? This is where callbacks come in.

[code lang=”js”]
$(‘#something’).hover(function(){
$(this).animate({
opacity: ‘0.5’,
});
}, function(){
$(this).animate({
opacity: ‘1’,
});
});
[/code]

View the demo

This snippet of code makes an element animate to 0.5 opacity when you hover over it, and animates it back to 1 when you hover off of it.

Animate On Click

Hovering is a popular way to start a jQuery animate function. However, clicking is also a great way to initialize an animate function.

[code lang=”js”]
$(‘#something’).click(function(){
$(this).animate({
opacity: ‘0.5’,
});
});
[/code]

View the demo

As you can see, the syntax is basically the same. Unfortunately, jQuery doesn’t support click callbacks, so this will be a one-time animation. If you aren’t satisfied with that, there’s a marvelous plugin just waiting for you: Clickoutside.js

Also, a problem with animations is that the queue up. Check out this article for more info: Animations Without Queueing up.

If you want more info, take a look at the official jQuery page on animating.

Well, that’s the end of this tutorial. Good luck!

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

1 Comment

Comments are now closed.