jquery animate animation effect instructions

jquery animate animation effect instructions_jquery

WBOY

Release： 2016-05-16 18:42:33

Original

1121 people have browsed it

animate( params, [duration], [easing], [callback] )
Function used to create custom animations.
The key to this function is to specify the animation form and result style attribute objects. Each property in this object represents a style property that can change (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginLeft instead of margin-left.
The value of each attribute indicates the length of this style attribute when the animation ends. If it is a numeric value, the style property will gradient from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation form is invoked for the property.
In jQuery 1.2, you can use em and % units. Additionally, in jQuery 1.2, you can make elements move relative to each other by specifying " =" or "-=" in front of the attribute value.
In jQuery 1.3, if duration is set to 0, the animation will be completed directly. In previous versions, the default animation was performed.
After clicking the button, several different attributes of the div element change together:

Copy the code The code is as follows:

 
// Apply three types of effects simultaneously in one animation 
$("#go").click(function(){ 
$("#block").animate({ 
width: "90%", 
height: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ); 
}); 
 animate( params, options ) 

Function used to create custom animations.
The key to this function is to specify the animation form and result style attribute objects. Each property in this object represents a style property that can change (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginLeft instead of margin-left.
The value of each attribute indicates the length of this style attribute when the animation ends. If it is a numeric value, the style property will gradient from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation form is invoked for the property.
In jQuery 1.2, you can use em and % units. Additionally, in jQuery 1.2, you can make elements move relative to each other by specifying " =" or "-=" in front of the attribute value.
After the first button is pressed, an animation that is not in the queue is displayed. When the div expands to 90%, it also increases the font. Once the font is changed, the animation of the border starts:

Copy code The code is as follows:

 
$("#go1").click(function(){ $("#block1").animate( { width: "90%"}, { queue: false , duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $( "#block2").animate( { width: "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); 
 

stop( [clearQueue], [gotoEnd] )
Stops all animations running on the specified element.
If there are animations waiting to be executed in the queue (and clearQueue is not set to true), they will be executed immediately
clearQueue(Boolean): If set to true, the queue is cleared. Animation can be ended immediately.
gotoEnd (Boolean): Let the currently executing animation complete immediately, reset the original styles of show and hide, call callback functions, etc.
After clicking Go, the animation will start. After clicking Stop, it will stop at the current position:

Copy code The code is as follows:

 
// Start animation $("#go").click(function(){ $(".block").animate({left: ' 200px'}, 5000); }); / / Stop the animation when the button is clicked $("#stop").click(function(){ $(".block").stop(); }); 