Animate (params, [duration], [easing], [callback])
A function to create a custom animation.
The key to this function is to specify the animation form and the result style Property object. Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left.
The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.
In JQuery 1.2, you can use EM and% units. In addition, in JQuery 1.2, you can make the element relative motion by specifying "+ =" or "=" in front of the attribute value.
In JQuery 1.3, if duration is set to 0, the animation is done directly. In previous versions, the default animation is performed.
Click on the button to change the DIV element's several different properties together:
Copy Code code as follows:
Apply three different types of effects in one animation
$ ("#go"). Click (function () {
$ ("#block"). Animate ({
Width: "90%",
Height: "100%",
FontSize: "10em",
Borderwidth:10
}, 1000);
});
Animate (params, options)
A function to create a custom animation.
The key to this function is to specify the animation form and the result style Property object. Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity"). Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left.
The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.
In JQuery 1.2, you can use EM and% units. In addition, in JQuery 1.2, you can make the element relative motion by specifying "+ =" or "=" in front of the attribute value.
When the first button is pressed, the animation that is not in the queue is displayed. When the div expands to 90%, the font is added, and once the font has been changed, the border animation begins:
Copy Code code 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 that are running on the specified element.
If there is an animation 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 emptied. You can end the animation immediately.
Gotoend (Boolean): Let the currently executing animation complete immediately, and reset the original style of show and hide, call the callback function, and so on.
Click Go to start the animation, after the stop will stop at the current position:
Copy Code code as follows:
//Start animation $ ("#go"). Click (function () {$ (. block). Animate ({left: ' +200px '}, 5000); }); When the button is clicked, stop the animation $ ("#stop"). Click (function () {$ (. block). Stop ();});
