JQUERY animate

Click Here

The animate() effect lets you create your own animations.

Syntax JQUERY animate()

$(selector).animate({params},speed,callback);

The params parameter is mandatory and defines the CSS properties to be animated.

The parameter speed is optional and defines the duration of the effect. It can be expressed in milliseconds, or two presets "slow" or "fast".

The parameter callback is optional and allows you to run another function to finish the effect.

Examples JQUERY animate()

We can change the size of text on our <p> to 4em paragraph, slowly to appreciate the change well.

$("p").animate({fontSize:'4em'},"slow");

If we want to change the height of a <div> element, we can define a fixed value or an incremental value

$("div").animate({height:'2000px'});
$("div").animate({height:'+=80px'});

If we want to move an item <div> a distance of 300 pixels to the right, extend the left margin

$("div").animate({left:'300'});

We can change several CSS properties at once. It is usual to create a more realistic animation.

$("div").animate({ left:'300px', height:'+=80px', width:'+=80px', opacity:'0.3' });

The first effect (left) moves the item to the right, because it increases the margin to the left.

The second effect (height) increases the height <div> 80 pixels.

The third effect (width) increases the width <div> 80 pixels.

The fourth effect (opacity) blurs the element to 0.3 (0 is completely hidden).


Click Here