Viewers: in countries Watching now:
So first I'm going to save the clicked link in case I need it for later using this. And then, I'm going to find the image. So that would be the first image that I find inside the link. Okay. So, now I have the image. And now I'm going to choose something that I want to animate. So, let's say I want to shrink these down a little bit when I click the link. It's going to take the image. And then I'm going to use the jQuery animate method. And it takes, as an argument, an object. So, what I'm going to feed in here is whatever properties I want to animate. And then, what I want to animate them to.
So, to start out with something simple, let's animate the width property to make these smaller. So I don't know what these are now, maybe 125 pixels, 150 somewhere in there. So let's make sure that we make this quite visible and shrink them down to 30 pixels. Okay, so first I built up this object but I need to tell jQuery how long to take to do this. There is a default duration for any animation that you've set up of 400 milliseconds, but I am going to pass in 2,000 milliseconds or two seconds to make this a little longer and easier to see. And now I'll save this, come back over here and reload.
OK and there we go, jQuery animates these down to 30 pixels wide. Now this works for pretty much any numeric property. You can use it on width, height, various box dimensions on the containing boxes. You can use it on top, left, right, the margins, the padding, all kinds of stuff. One thing you can not animate out of the box with jQuery is color. Even though color is technically a numeric property. That is a hexadecimal number, so you know something like this. You can't animation that with jQuery Core, there is color animation built into jQuery UI.
Which we'll look at later. Just know that out of the box, you can not animate color with just jQuery itself. But let's take a look at some other things that you can do here. So if I want to animate this, I can set an absolute width or I can use a percentage. So let's try this, reload. So this is 50%. When you do an animation like this, the way it works is exactly the way it would work in CSS. So this is 50% of the container's width. That's just something you need to keep in mind. This becomes especially important when you're looking at things like animating where something is located.
So for example, if I want to move something to the left. You might think that I can take left, which is a CSS property, and then say animate it to 400 pixels, or whatever. I reload this, I can click, and nothing happens. The reason nothing happens is the same reason that nothing would happen if I set this property manually in my CSS. This is just using regular static positioning so of course that left property has no effect. If I want to be be able to animate like this, I have two choices. I can either change the CSS on that image so it uses absolutely positioning or maybe fixed positioning, something like that where it breaks out of the flow of the document and I can move it around willy nilly.
Or instead I can change this left to its left margin or perhaps its padding. So I'll just do that for now, change it to the margin and reload. And now over the course of two seconds the margin goes from zero to 400. And again this works on all of these because I set this animation property to all these selected images. Now let's try combining a couple of these. So I'm going to add another property, I'm going to do these two animations simultaneously. Change the width to, let's go with 50 pixels this time, margin to 400 pixels.
Reload, and watch it move and shrink. Nifty, and again, works on all of em. All at the same time. One more thing to mention here, all of these units, can be relative units. So, if for example, I want to take the current width and then reduce it by 50 pixels, instead of going to 50 absolute pixels, I can do this, I can say minus equals 50 pixels. Just to make this little more obvious, we'll go to 20. Because, otherwise, this would just go to a really tiny image. And we should see a very subtle change this way.
It's going to reload. Perhaps that change was a little too subtle. Let's do 50 again, and reload. There we go. Now, you can clearly see that it's shrinking. But it's not shrinking down to 50 pixels. It's shrinking down to 50 pixels smaller than it was originally. And so I can use plus equals as well. There we go. It ends the animation 50 pixels larger than it was when it started. And you can add as many properties as you want and animate them all at the same time with a single call to the animate method. So that's an initial look at jQuery's Animate Method, which lets you animate a bunch of numeric properties, as many as you want all at the same time.
There are currently no FAQs about jQuery for Web Designers.
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.