Join Joe Chellman for an in-depth discussion in this video Animate numeric properties, part of jQuery for Web Designers.
- [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 I'll just give it a number, say, 50.…
- When to use jQuery
- Installing jQuery
- Setting up functions
- Using jQuery classes
- Modifying the DOM
- Event binding
- Reading and setting values
- Integrating plugins
- Animating websites with jQuery
Skill Level Intermediate
1. jQuery Introduction
2. Essential Concepts
3. It's Easier in jQuery
4. Integrate a Plugin
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.