How Can Use the Animated effect of jQuery

Freebies, jQuery, Tutorials

jquery-animated-effect
[ad#link-unit-post]

.animate() The funct

Over View: is the function of jQuery that use for the animated effect of jQuery. This feature of jQuery makes thousands of things easy for developer( not written millions of line of code )and you can achieve the animated  high quality effect. This is compatible with all browser…

Parameter of .animate(properties,duration,easing,callback)

There are 3 parameter

  • Properties (A map of CSS properties that the animation will move toward.)
  • Duration (A string or number determining how long the animation will run.)
  • Easing (A string indicating which easing function to use for the transition.)
  • Callback (A function to call once the animation is complete.)

It perform a custom animation of a set of css properties

.animate( properties, options )

properties (A map of CSS properties that the animation will move toward.)

options: A map of additional options to pass to the method.

Supported keys:

Duration: A string or number determining how long the animation will run.
Easing: A string indicating which easing function to use for the transition.
Complete: A function to call once the animation is complete.
Step: A function to be called after each step of the animation.
Queue: A Boolean indicating whether to place the animation in the effects queue.  Iffalse, the animation will begin immediately.
specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions

Explanation

The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.
All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.) Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.
In addition to numeric values, each property can take the strings ‘show’, ‘hide’, and ‘toggle’. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
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.

Duration

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600milliseconds, respectively.

Callback Function

If supplied, the callback is fired once the animation is complete. This can be useful for stringing different animations together in sequence. The callback is not sent any arguments, but this is set to the DOM element being animated. If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

Example

<div  id=”div_ani”>
Click here to test animation
</div>
<img id=”img_ani” src=”b.jpg”  style=”position:relative; left:10px; width:100px;”>

We can animate the opacity, left offset, and height of the image simultaneously:

$(‘#div_ani’).click(function() {
$(‘#img_ani’).animate({
opacity: 0.25,
left: ‘+=50′,
height: ‘toggle’
}, 5000, function() {
// the animation is  complete.
});
});

Final Result

jquery-animated-effect-result

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author

Comments and Discussions

  1. Servefault.com, 20 April 2010

    How can use the Animated effect of jQuery…

    Thank you for submitting this cool story – Trackback from Servefault.com…

  2. Hermitbiker, 20 April 2010

    …. good tutorial about “How You Can Use the Animated Effect of jQuery”…. thanks !!

  3. Webstandard-Blog, 21 April 2010

    Thx for sharing. Using JavaScript for animation is one solution, at the future we will have anotherone with CSS3-Animations – Watch -> Bouncing Navigation!

  4. Tweets that mention http://www.dzinepress.com/2010/04/how-can-use-the-animated-effect-of-jquery -- Topsy.com, 28 April 2010

    […] This post was mentioned on Twitter by . said: […]

  5. Multyshades, 26 May 2010

    useful and helping us for our ongoing projects. thanks for sharing

  6. Multyshades, 20 July 2010

    Great tips, thanks for share

  7. Brandon Prestidge, 14 October 2010

    18. Great function, I like the way you reach your reader. It touches my soul and mind because I really comprehend each element you mention though for the reality its complex.

  8. 200+ More Useful Fresh Articles for Designers and Developers - tripwire magazine, 3 February 2011

    […] How can use the Animated effect of jQuery […]

About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News