Latest web development tutorials

jQuery effects - Animation

jQuery animate () method allows you to create custom animations.



jQuery

jQuery animations - animate () method

jQuery animate () method is used to create custom animation.

grammar:

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

Required params parameter defines the formation of CSS properties animation.

The optional speed parameter specifies the duration of the effect. It may take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after completion.

The following example demonstrates a simple application animate () method. It <div> element to the right to move 250 pixels:

Examples

$("button").click(function(){
$("div").animate({left:'250px'});
});

try it"

lamp By default, all HTML elements have a static position and can not move.
For operating position, remember the first element CSS position attribute set to relative, fixed or absolute!


jQuery animate () - operating multiple properties

Please note that the process of generating the animation can use multiple properties:

Examples

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

try it"

lampYou can animate () method to operate all CSS attributes?

Yes, almost! However, the important thing to remember: When using animate (), write all the attributes names must use the Camel notation, for example, must be used instead of paddingLeft padding-left, instead of using marginRight margin-right, etc. .

At the same time, the color animation is not included in the core jQuery library.

If you need to generate color animation, you need to jquery.com download Color Animations plugin.



jQuery animate () - the use of relative value

You can also define the relative value (the value is relative to the current value of the element). Need to precede the value with the + = or - =:

Examples

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

try it"


() JQuery animate - use predefined value

You can even put the value of the animation property to "show", "hide" or "toggle":

Examples

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

try it"


jQuery animate () - Using the Queue function

By default, jQuery provides queuing capabilities for animation.

This means that if you write more than one after another animate () call, jQuery will create a method call these "internal" queue. Then one by one to run these animate calls.

Example 1

$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

try it"

The following example of the <div> element is moved to the right 100 pixels, and then increase the size of the text:

Example 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

try it"