﻿ jQuery Animate

jQuery Animate

One of the most robust jQuery effects is the animate method. This effect can be used to do all sorts of CSS properties. You can animate left, right, top, left, width, height, and much more. With this you can declare your CSS property and the options that you want to execute in the animate. Some of these options are duration, easing, complete, step, queue, and specialEasing. The animate effect allow you to create a animation on any css numeric property. As for units you can use px, em, or %. Besides style properties you can use some non-style properties like scrollTop and scrollLeft. For each numeric value you can also use toggle, show, and hide. Another thing that you can add to each property is a += or -=. That way it adds to the current or subtracts from the current.

Putting Animate To The Test

OK so to build out an animation you have to first figure out how you want to activate the animation. You can do a click effect, just start the animate effect automatically or others. These are the most used ways to start a animation but you can use other ways. So here are some examples or animating.

OK so this example will have 2 button/classes (First Click ID Or Class) and (Second Click ID Or Class). Once you click the first one of these the object (What You Want To Animate) will move left 10px. If you click it again it will move another 10px. If you click the (Second Click ID Or Class) then the object will move to the right 10px or left -10px. Both of these use the slow duration but you can use fast or a numeric milliseconds value. For instance 2 seconds would be 2000.

Second Example

With this second example we will animate the opacity, right, and width. Each of these CSS elements will have different effects.

So what this example is doing is animating the opacity to 0.5 compared to what it starts as. It moves right in 10px intervals and the width of the animated element toggle’s. All of these are being done on a 10 second time period.

If you would like to know more about the jQuery animate effect please feel free to leave a comment and we will reply to you. You can also head over to the jQuery website and learn more. They have a robust description and tons of examples of how to use animate.