From the course: jQuery for Web Designers

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Animate numeric properties

Animate numeric properties - jQuery Tutorial

From the course: jQuery for Web Designers

Start my 1-month free trial

Animate numeric properties

- [Voiceover] In this movie we're going to take a look at jQuery Animate, which can take almost any numeric property in your CSS, and animate it for you. So here we are with our toggle button, which I've changed to say "Move" instead, but currently its function is just where we left it before, where it slide-toggles all of these berry-flavored waters. So what we're going to do now is change it, so it animates arbitrary properties, not just the ones that come in those special, named functions. Switching back to the script, we'll start to make a little change here. I'm gonna break the animation function onto its own line, and I'm going to replace it with animate. This is what we use when we want to animate anything numeric. We'll pass in an object as its first argument. And now we get to choose what we want to animate. So just for the purpose of demonstration, I'm going to go with, say, the left margin. This is a way that you can move things around pretty easily. So what I'll do here is…

Contents