Copy Code code 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");
Display after
$ ("P"). Animate ({
Opacity: ' Show '
}, 500,function () {alert (' load complete ');});
});
</script>
<body>
<button id= "Left" > Move right </button> <button id= "Right-hand" > Move </button>
<div class= "block" > Zhang Ziyu Test </div>
<p>
return value: Jqueryanimate (params, [duration], [easing], [callback])
Overview
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.
Parameters
Paramsoptions a set of style attributes and their values as animation properties and end values
Duration (optional) String,number a string ("slow", "normal", or "fast") of one of the three predetermined speeds, or a millisecond value indicating the length of the animation (for example: 1000)
Easing (optional) string The name of the erase effect to use (requires plug-in support). The default jquery provides "linear" and "swing".
Callback (optional) function that is executed when the animation completes
Example
Describe:
Click on the button after the DIV element of several different attributes change together
HTML Code:
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);
});
Describe:
Let the specified element move around
HTML Code:
Copy Code code as follows:
$ ("#right"). Click (function () {
$ (". Block"). Animate ({left: ' +50px '}, "slow");
});
$ ("#left"). Click (function () {
$ (". Block"). Animate ({left: ' -50px '}, "slow");
});
Describe:
Toggles the height and transparency of a paragraph within 600 milliseconds
JQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
Height: ' Toggle ', opacity: ' Toggle '
}, "slow");
Describe:
Move the paragraph to the left 50 in 500 milliseconds and show it clearly (transparency is 1)
JQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
LEFT:50, opacity: ' Show '
}, 500);
Describe:
An example that uses the "Easein" function to provide different animation styles. This parameter only works if the plug-in is used to provide this "Easein" function.
JQuery Code:
Copy Code code as follows:
$ ("P"). Animate ({
Opacity: ' Show '
}, "Slow", "Easein");
