A function used to create a custom animation. The key to this function is to specify the animation format and result style attribute objects. The following describes how to use the animate method in detail. If you are interested, you can understand it.
The Code is as follows:
$ (Function (){
$ ("# Left"). click (function (){
$ (". Block"). show ();
$ (". Block"). animate ({
Width: "+ 200px ",
Height: "+ 200px ",
FontSize: "1em ",
BorderWidth: 10
}, "Slow", "swing ");
});
$ ("# Right"). click (function (){
$ (". Block"). show ();
$ (". Block"). animate ({
Width: "-200px ",
Height: "-200px ",
FontSize: "10em ",
}, "Slow", "swing ");
});
/*
$ ("P"). animate ({
Height: '200px ', opacity: 'toggle'
}, "Slow ");
$ ("P"). animate ({
Left: 50, opacity: 'show'
}, 500 );*/
// Fade first
$ ("P"). animate ({
Opacity: 'toggle'
}, "Slow", "swing ");
// Displayed later
$ ("P"). animate ({
Opacity: 'show'
}, 500, function () {alert ('Load finished ');});
});
Script
Move to the right Move to left
Zhang ziyu Test
Return Value: jQueryanimate (params, [duration], [easing], [callback])
Overview
A function used to create a custom animation.
The key to this function is to specify the animation form and result style attribute object. Each attribute in this object represents a changeable style attribute (such as "height", "top", or "opacity "). Note: All specified attributes must be in the camel format. For example, margin-left must be replaced by marginLeft.
The value of each attribute indicates the animation ends when the style attribute is reached. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.
In jQuery 1.2, you can use em and % units. In addition, in jQuery 1.2, you can specify "+ =" or "-=" before the attribute value to make the element do relative motion.
In jQuery 1.3, if the duration is set to 0, the animation is directly completed. In earlier versions, the default animation is executed.
Parameters
ParamsOptions contains a set of style attributes and their values as animation attributes and final values.
Duration (optional) String, a String ("slow", "normal", or "fast") of one of the three predefined speeds, or a millisecond value (for example, 1000) indicating the animation duration)
Easing (optional) Name of the erased effect to be used by String (required by the plug-in). By default, jQuery provides "linear" and "swing ".
Callback (optional) Function executed when the animation is completed
Example
Description:
After you click the button, several different properties of the p element change together.
HTML code:
The Code is as follows:
// Apply three types of effects to an animation at the same time
$ ("# Go"). click (function (){
$ ("# Block"). animate ({
Width: "90% ",
Height: "100% ",
FontSize: "10em ",
BorderWidth: 10
},1000 );
});
Description:
Move the left and right of a specified Element
HTML code:
The Code is as follows:
$ ("# Right"). click (function (){
$ (". Block"). animate ({left: '+ 50px'}, "slow ");
});
$ ("# Left"). click (function (){
$ (". Block"). animate ({left: '-50px'}, "slow ");
});
Description:
Change the height and transparency of a paragraph within 600 milliseconds
JQuery code:
The Code is as follows:
$ ("P"). animate ({
Height: 'toggle ', opacity: 'toggle'
}, "Slow ");
Description:
Move the section to a left-side 50 area in 500 milliseconds and the section is completely clear (transparency is 1)
JQuery code:
The Code is as follows:
$ ("P"). animate ({
Left: 50, opacity: 'show'
},500 );
Description:
An example of using the easein function to provide different animation styles. This parameter takes effect only when the plug-in is used to provide this "easein" function.
JQuery code:
The Code is as follows:
$ ("P"). animate ({
Opacity: 'show'
}, "Slow", "easein ");
