[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

jQuery Animation - Custom Animation: Part 1 with Jim Hoskins

In the last video, we took a look at some of the built-in effects that jQuery offers,

like .hide(), .show(), .fadeIn(), .fadeOut(), .slideUp(), and .slideDown().

In this video, we're going to take a look at how to create our own custom animations using

the .animate() method.

The keystone of custom animations in jQuery is the .animate() method.

The simplest form of .animate() takes a javascript object or map of properties to animate.

Now, this is very similar to how we could send an object or map to the CSS method

to set multiple CSS properties.

The difference is the supported styles.

For instance, in CSS, we could pass any CSS property to the object,

but in .animate(), we can only use the properties that have numeric values.

So, things like width, height, margin top, etc.

Now, if you're using the jQuery UI library, it will actually extend the capabilities

of the .animate() method to allow you to animate colors,

but we're going to talk more about that in the upcoming jQuery UI videos.

So let's take a little example here.

The simplest thing we can do is pass numeric values to our properties.

We're going to be using this page as our example.

We have a target div here with a height and a width, and it's going to be

absolutely positioned--right now it's at 100 and 100.

with a width of 200 and 200.

So we'll be using these different buttons to trigger our different demonstration animations

to show the different capabilities of the .animate() function.

If you go back to our code, we can do a simple transformation by passing in the top

to be 200 and left to be 200.

Now, if we just pass numeric values to these keys, it's going to be interpreted as pixels.

So when we call this function here, it should move to 200 pixels from the top of the page

and 200 pixels from the left of the page.

Let's flip back to our example and reload,

and we click and execute our function.

We'll see that we now animated to 200 and 200 pixels from the top and left.

We can refresh and see that again, and it makes a nice, smooth animation.

Now, if we don't want to use pixels, we can pass a string and use em's or percentages

in this example, we want to move it to the left

100 pixels, and then we're going to move it 2 em's from the top.

So, to do that, we do top: '2em'

Let's save it and refresh it, and we can see that we now move to 100,

which it already was at, and then 2 em's to the top.

We could also similarly do percentages here, but like I said, if you want to just do pixels,

you can do pixels like this, or just do it as a number.

We're going to leave this back at em's

If you just pass a single value to the value of one of your properties,

it's going to animate so it ends at that property.

But if you want to do incremental changes, you can use this technique to either

increase a value or decrease a value.

Let's say we want to increase the width.

We'll say width:, and to do an increase, we have to do it as a string, and our string has a

start of +=, and then let's say 50 pixels.

If we flip back to our example here, and we click our 'increase width'

we should see that it now increases 50 pixels every single time we click it,

so It takes the original value and adds 50.

Now, you have to make sure that you use exactly this formula.

If you try to put a space between it, it will not work.

So it has to be += and then the value immediately afterward.

Similarly, we can decrease a value

by using -=.

So here, let's try decreasing the height--we'll say -=, and then we'll say 20 pixels.

We could do em's or percentages, but we're going to do pixels for this example.

If we refresh, we'll see that our height is decreased by 20 pixels each time we click it.

The .animate() function also takes a second argument,

which is going to be the duration of the animation.

As we saw before, there is a default speed for animations, which was 400,

but if we want to define our own speeds--for instance,

let's say we want it to go over 2 seconds--so that's 2000 miliseconds--

so let's move our object to the left--we'll say 400.

We can click here, and now we'll move it slowly, and we can see that

it's taking a little longer to make its animation.

There is a third argument that you can use to pass to animate,

and that's an 'easing' function.

Let's fill this in right now, and we'll say that we're going to move to the left

over 2000 miliseconds.

Our third argument is an 'easing' function.

This is going to be a string name for a built-in 'easing' function.

There are 2 different ones built into jQuery:

there's 'swing', which is going to be the default

and then there's also a linear one, which we'll take a look at in a second.

If you use jQuery UI there will be more 'easing' functions available, and other plug-ins

may offer different 'easing' functions.

The way 'easing' functions work is it defines how quickly the animation will move

through different parts of your animation.

For instance, the 'swing easing' animation will start off very slow,

and then accelerate, and then slow off at the end,

so it has a nice, easy swinging movement.

Let's take a look at what that looks like.

So we see it starts very slow, it speeds up, and then it slows down

into its final position.

Let's take a look at the 'linear' function.

We'll pass it in here, and we're going to say 'linear'.

Let's put the value back to 100, so we'll be able to go back and forth and compare.

Let's flip over to our page.

If we move to our right using 'swing', we see it gets slow, it gets faster,

and then slows down again.

But if we do 'linear', it moves at a constant pace so you notice it goes slow, gets faster,

and then slows down, and 'linear' it's much more jerky at the beginning.

It just immediately goes at a certain speed and then immediately stops on the other side.

Now we've seen how to use .animate() to create our own custom animations.

In the next part, we're going to take a look at

some of the more advanced capabilities of this method.

[?upbeat guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com