Dzinepress

.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

Senior UI Architect working from 7+ years and also have front-end development experience, now a days working on design and technology based bloggers and also provide consultancy about Article writing/Content writer.

admin

View all posts by admin
Mirzas website

Related posts:

1. 55 Decisive Useful jQuery Tutorials I would like to present an well-aware language best...
2. 40 Ultimate Useful JavaScript Tutorials for Web Professionals As per latest trend of website designing and development...
3. 50+ Ultimate Useful Cheat Sheets for Web Developers and Designers We presenting something special for Web Designers and developers...
4. 50+ Useful CSS Professional Techniques As we know most of the Web designers and...
5. 50 Excellent Tutorials for Web Development Using CSS3 In this modern web world we offering CSS3 techniques...

Related posts brought to you by Yet Another Related Posts Plugin.