Jquery animation effect instructions, jqueryanimate

Jquery animation effect instructions, jqueryanimate
Animate (params, [duration], [easing], [callback])
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.
After clicking the button, several different attributes of the div element change together:
The Code is as follows:
// Apply three types of effects to a jquery animation at the same time
$ ("# Go"). click (function (){
$ ("# Block"). animate ({
Width: "90% ",
Height: "100% ",
FontSize: "10em ",
BorderWidth: 10
},1000 );
});
Animate (params, options)
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.
After the first button is pressed, the animation that is not in the queue is displayed. When the div is expanded to 90%, the font is also added. Once the font is changed, the animation of the border begins:
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 that are running on the specified element.
If there are animations waiting for execution in the queue (and clearQueue is not set to true), they will be executed immediately
ClearQueue (Boolean): If it is set to true, the queue is cleared. The animation can be ended immediately.
GotoEnd (Boolean): enables immediate completion of the animation being executed, resetting the original style of show and hide, and calling the callback function.
Click Go to start the animation. After you click Stop, the animation stops at the current position:
The Code is as follows:
// Start the animation $ ("# go "). click (function () {$ (". block "). animate ({left: '+ 200px'}, 5000) ;}); // click the button to stop the animation $ ("# stop "). click (function () {$ (". block "). stop ();});