jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Effects - Animation

jQuery allows us to create custom animations.

Click me!!!

jQuery Animations - The animate() Method

The jQuery animate() method performs a custom animation of a set of CSS properties.

Here is the syntax for animate() method:

$(selector).animate({styles}, duration, easing, callback)

Parameters:

  • {styles} - Specifies an object of CSS properties and values that the animation will move toward
  • duration - Determines how long the animation effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the animate() method is completed

The following example animates an element, by changing its width:

Run code

The following example animates an element, by changing its position:

Run code

All HTML elements have static position by default, and static element cannot be moved.

To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute.


jQuery animate() - Set Multiple Properties

We can also animate multiple properties of an element together at the same time.

Run code

The following example demonstrates the duration and easing parameters with animate():

Run code

The following example demonstrates the callback parameter with animate():

Run code

Points to remember while using animate() method:

  • All animated properties should be animated to a single numeric value (For example, width, height, or left)
  • String values cannot be animated (For example, background-color)
  • To animate the background-color use the jQuery color plugin
  • The property names must be camelCased when used with the animate() method: You will need to write paddingTop instead of padding-top, marginLeft instead of margin-left, and so on


jQuery animate() - Queued Animations

By default, jQuery comes with queue functionality for animations.

In a queue one or more function(s) wait for run.

This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.

The example below first changes the width a DIV element, then height, and then increases the font size of the text:

Run code

We can also animate multiple properties of an element ONE by ONE individually in a queue using the jQuery's chaining feature.

Run code

You will learn more about chaining later in this tutorial.


jQuery animate() - Relative Values

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

Run code

jQuery animate() - Pre-defined Values

In addition, we can even specify a property's animation value as "show", "hide", or "toggle":

Run code

jQuery Effects Reference

For a complete effects reference, visit our jQuery Effects Reference.