Summary of dynamic effects in jquery

Animation effect. If combined, you can also use simple code to implement the effects of various jquery plug-ins.

This article is based on the book "talking about jquery" and is based on your own practical experience. It can be seen as a learning manual.
When the code was edited, the code was all in disorder. After the code was reorganized, the code format may be a bit messy. Please forgive me.
Show, hide and toggle
1. show (speed, callback );
Note: This method can display hidden elements. The parameter is also the default one, that is, it is written as show ().
Speed --- specify the display speed. You can select slow, normal, and fast as three parameters, or you can specify a number (unit: milliseconds)
Callback --- callback function
The following is a simple example.

Copy codeCode: var callback = function () {// alert ("I Am a callback function ");
}
Var f1 = function (){
// $ ("# T1"). show (); default parameter
// $ ("# T1"). show ("fast", callback); the display speed is fast.
$ ("# T1"). show (3000, callback); // custom display speed: 3000 Ms
};
$ ("# B1"). click (f1 );

Html codeCopy codeThe Code is as follows: <input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "display: none; border: 1px solid gray; "> dd </div>

2 hidden (speed, callback );
Note: The opposite is the show method, which is used to hide elements. parameters are the same as show. For details, refer to 3.1.
In the following example, click a button to hide the displayed divCopy codeCode: var callback = function () {// alert ("I Am a callback function ");
}
Var f1 = function (){
// $ ("# T1"). hide (); default parameter
// $ ("# T1"). hide ("fast", callback); the display speed is fast.
$ ("# T1"). hide (3000, callback); // custom display speed: 3000 Ms
}; $ ("# B1"). click (f1 );

Html codeCopy codeThe Code is as follows: <input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray; "> dd </div>

3 toggle (speed, callback)
Note: this can be understood as a combination of show () and hide () methods, rotating and executing show () and hide ()
For example, a page has a hidden element. When toggle () is executed for the first time, the display element is displayed, the second operation is performed, and the hidden element is displayed for the third time...
The parameter is the same as 3.1.Copy codeCode: var callback = function () {// alert ("I Am a callback function ");
}
Var f1 = function (){
// $ ("# T1"). toggle (); // default parameter
// $ ("# T1"). toggle ("fast", callback); // The display speed is fast.
$ ("# T1"). toggle (3000, callback );
};
$ ("# B1"). click (f1 );

Html codeCopy codeThe Code is as follows: <input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray; "> dd </div>

2. sliding effect of elements (expand down and contract up)
1. slideDown (speed, [callback]);
(Changes the height of an object to achieve downward expansion of the animation effect, commonly used and show hidden elements)Copy codeCode: var callback = function () {// alert ("I Am a callback function ");}
Var f1 = function (){
// $ ("# T1"). slideDown (); // default parameter
// $ ("# T1"). slideDown ("fast", callback); // The display speed is fast.
$ ("# T1"). slideDown (1000, callback );
};
$ ("# B1"). click (f1 );

Html codeCopy codeThe Code is as follows: <input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray; "> dd </div>

2. slideUp (speed, [callback]);

(Changes the height of an object to achieve up-expanding animation effects, commonly used to hide display elements)Copy codeThe Code is as follows: var callback = function (){
// Alert ("I Am a callback function ");
}
Var f1 = function (){
// $ ("# T1"). slideUp ();
// Parameter default // $ ("# t1"). slideUp ("fast", callback); // The display speed is fast.
$ ("# T1"). slideUp (1000, callback );
};
$ ("# B1"). click (f1 );
<Input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray; "> dd </div>

3. slideToggle (speed, [callback]);

Note: it can be said that the above two methods can replace toggle (). If you have carefully read the above several methods, you should know how to use them, in fact, the usage and parameters of these methods are the same, but the presentation form is different. I will not write the example.

Three-element fade-in and fade-out effect

1. fadeIn (speed, [callback]);

Description: fades out to show hidden elements.

2. fadeOut (speed, [callback]);

Note: This function is used to hide the displayed elements.

3, fadeTo (speed, opactity, callback );

Note: This method is used to change the transparency of the display element.

Parameter: speed and callback. The parameters of other animation methods described above are the same,OpactityThe parameter indicates transparency. The value range is 0-1.Copy codeThe Code is as follows: var callback = function (){
// Alert ("I Am a callback function ");
};
Var f1 = function () {$ ("# t1"). fadeTo (1000, 0.3, callback); // 0.3 is transparency 30%
};
$ ("# B1"). click (f1 );
<Input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray "> dd </div>

4. Custom Animation

Note: The first, second, and third elements show, slideDown, and fadeIn, and hide the animation effects of hide, slideUp, and fadeOut.

, Combined effect toggle, slideToggle, change the transparency effect fadeTo, we can also customize some animation effects as needed

How to Use Custom Animation: animate (params, speed, callback );

Parameter description: params-a set of animation attributes and final values. A set of style attributes and values.

Speed ---- same as the speed attribute in the previous method

Callback --- callback function

Note: The style attributes of params must be written in the camper format. For example, margin-left should be in the slightly marginLeft format.

The following is an example.Copy codeThe Code is as follows: var callback = function (){
// Alert ("I Am a callback function ");
};
Var par = {height: "70% "};
Var f1 = function (){
$ ("# T1"). animate (par, 1000, callback );
};

$ ("# B1"). click (f1 );

Html codeCopy codeThe Code is as follows: <input type = "button" value = "show" id = "b1"/> <div id = "t1" style = "border: 1px solid gray "> dd </div>