jQuery effects - Animation
jQuery animate () method allows you to create custom animations.
jQuery animations - animate () method
jQuery animate () method is used to create custom animation.
grammar:
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
$("div").animate({left:'250px'});
});
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
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
You 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
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
() JQuery animate - use predefined value
You can even put the value of the animation property to "show", "hide" or "toggle":
Examples
$("div").animate({
height:'toggle'
});
});
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
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");
});
The following example of the <div> element is moved to the right 100 pixels, and then increase the size of the text:
Example 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});