jquery effect (ii)

The JQuery animate () method is used to create custom animations.
Grammar:
$ (selector). Animate ({params},speed,callback);
The required params parameter defines the CSS property that forms the animation.
The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.
The optional callback parameter is the name of the function that is executed after the animation is completed.

　　

Tip: By default, all HTML elements have a static location and cannot be moved.
To operate the location, remember to first set the element's CSS position property to relative, fixed, or absolute!

Manipulating multiple properties
Note that multiple properties can be used in the process of generating an animation:
Instance

　　

Tip: Can I use the animate () method to manipulate all CSS properties?
Yes, almost possible! However, one important thing to remember is that when you use Animate (), you must use the Camel notation to write all property names, for example, you must use the
Paddingleft instead of Padding-left, use marginright instead of margin-right, and so on.
At the same time, color animations are not included in the core JQuery library.
If you need to generate color animations, you need to download the color animations plugin from jquery.com.

Using Relative values
You can also define a relative value (this value relative to the current value of the element). You need to precede the value with + = or-=:
Instance

$ ("button"). Click (function () {$ ("div"). Animate ({left: ' 250px ', Height: ' +=150px ', Width: ' +=150px '});});

　　

JQuery animate ()- use predefined values
You can even set the animation value of a property to "show", "Hide", or "toggle":
Instance

$ ("button"). Click (function () {$ ("div"). Animate ({height: ' toggle '});

　　

JQuery animate ()- Use the queue feature
By default, JQuery provides queue functionality for animations.
This means that if you write multiple animate () calls after each other, JQuery creates an "internal" queue that contains these method calls. These animate calls are then run individually
。
Example 1
Hidden, if you want to perform different animations after each other, then we want to take advantage of the queue functionality:

$ ("button"). Click (function () {var div=$ ("div");d iv.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");d iv.animate ({ Width: ' 300px ', opacity: ' 0.8 '}, ' slow ');d iv.animate ({height: ' 100px ', opacity: ' 0.4 '}, ' slow ');d iv.animate ({width: ') 100px ', opacity: ' 0.8 '}, "slow");});

　　

Example 2
The following example moves the <div> element to the right, and then increases the font size of the text:

$ ("button"). Click (function () {var div=$ ("div");d iv.animate ({left: ' 100px '}, "slow");d iv.animate ({fontSize: ' 3em '}, " Slow ");});

The JQuery Stop () method is used to stop animations or effects before they are finished.
The Stop () method applies to all JQuery effect functions, including sliding, fading, and custom animations.
Grammar
$ (selector). Stop (Stopall,gotoend);
The optional StopAll parameter specifies whether the animation queue should be cleared. The default is false, which stops only active animations, allowing any queued animation to be executed backwards.
The optional gotoend parameter specifies whether to complete the current animation immediately. The default is False.
Therefore, by default, stop () clears the current animation specified on the selected element.

The Callback function executes after the current animation 100% is complete.

$ (selector). Hide (Speed,callback)

$ ("P"). Hide (1000,function () {alert ("the paragraph is now hidden");});

　　

JQuery Chaining Method Links
Allows us to run multiple jQuery commands on the same element, one after the other.
Tip: In this case, the browser does not have to look for the same elements multiple times.
To link an action, you simply append the action to the previous action.
Example 1
The following example links CSS (), Slideup (), and Slidedown () together. The "P1" element first turns red, then slides up, then slides:

$ ("#p1"). CSS ("Color", "red"). Slideup (+). Slidedown (2000);