Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating numeric properties with animate()

From: jQuery for Web Designers

Video: Animating numeric properties with animate()

In this movie we're going to take a look at jQuery Animate, which can take any numeric property in your CSS and then animate it. So, looking over here, I have these flowers and I'd like to see if I can make these images animate when I click. So I'm going to scroll down to my JavaScript here. And I've already added click listeners to all of the anchor tags here. I could add them to the images but I'm starting with the anchors for now. And then what I'm going to do is first because I want to just animate the image for the moment I'm going to select the image.

Animating numeric properties with animate()

In this movie we're going to take a look at jQuery Animate, which can take any numeric property in your CSS and then animate it. So, looking over here, I have these flowers and I'd like to see if I can make these images animate when I click. So I'm going to scroll down to my JavaScript here. And I've already added click listeners to all of the anchor tags here. I could add them to the images but I'm starting with the anchors for now. And then what I'm going to do is first because I want to just animate the image for the moment I'm going to select the image.

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.

Show transcript

This video is part of

Image for jQuery for Web Designers
jQuery for Web Designers

37 video lessons · 11387 viewers

Joe Chellman
Author

 
Expand all | Collapse all
  1. 2m 17s
    1. Welcome
      1m 4s
    2. What you should know
      37s
    3. Using the exercise files
      36s
  2. 12m 0s
    1. jQuery is a JavaScript library?
      1m 15s
    2. When to use jQuery
      2m 51s
    3. Alternatives to jQuery
      1m 25s
    4. Which version of jQuery to use
      1m 50s
    5. How to install jQuery
      3m 21s
    6. Reference materials
      1m 18s
  3. 19m 19s
    1. Getting ready
      2m 26s
    2. Selecting elements to use
      3m 54s
    3. Performing multiple operations on the same line with chaining
      2m 30s
    4. Using classes to find what you're looking for
      3m 52s
    5. Adding, modifying, and removing content dynamically
      4m 3s
    6. Challenge: Form feedback
      1m 12s
    7. Solution: Form feedback
      1m 22s
  4. 18m 28s
    1. Triggering a change based on activity with event binding
      4m 37s
    2. Reading and changing values
      4m 17s
    3. Working with HTML attributes
      4m 55s
    4. Challenge: Dynamic contact form
      1m 27s
    5. Solution: Dynamic contact form
      3m 12s
  5. 16m 42s
    1. Using the Colorbox plugin to build a slideshow gallery
      4m 22s
    2. Implementing Colorbox on your site
      2m 46s
    3. Changing Colorbox options
      5m 53s
    4. Challenge: Convert to a slideshow
      1m 6s
    5. Solution: Convert to a slideshow
      2m 35s
  6. 28m 37s
    1. Using jQuery or CSS to animate elements
      2m 24s
    2. Creating simple jQuery animations
      4m 35s
    3. Animating numeric properties with animate()
      4m 56s
    4. Understanding animation easing
      4m 4s
    5. Putting it together: Flowers in the cart
      6m 4s
    6. Callbacks: What to do when the animation ends
      3m 27s
    7. Challenge: Improve the animation
      1m 3s
    8. Solution: Improve the animation
      2m 4s
  7. 4m 45s
    1. More fun plugins
      2m 38s
    2. What's next: More jQuery
      50s
    3. What's next: More JavaScript
      1m 17s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.