1. jQuery fadeIn () is used to fade hidden elements.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). fadeIn (speed, callback );
Instance:
Copy codeThe Code is as follows:
$ ("Button"). click (function (){
$ ("# Div1"). fadeIn ();
$ ("# Div2"). fadeIn ("slow ");
$ ("# Div3"). fadeIn (3000 );
});
2. The jQuery fadeOut () method is used to fade out visible elements.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). fadeOut (speed, callback );
3. The jQuery fadeToggle () method can be switched between the fadeIn () and fadeOut () methods.
If the element has faded out, fadeToggle () adds a fade-in effect to the element.
If the element is fade in, fadeToggle () adds a fade out effect to the element.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). fadeToggle (speed, callback );
Instance: $ ("button"). click (function (){
$ ("# Div1"). fadeToggle ();
$ ("# Div2"). fadeToggle ("slow ");
$ ("# Div3"). fadeToggle (3000 );
});
4 .. Syntax:
$ (Selector). fadeTo (speed, opacity, callback );
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The required opacity parameter in the fadeTo () method sets the fade-in and fade-out effect to a given opacity (value between 0 and 1 ). Instance
Copy codeThe Code is as follows:
$ ("Button"). click (function (){
$ ("# Div1"). fadeTo ("slow", 0.15 );
$ ("# Div2"). fadeTo ("slow", 0.4 );
$ ("# Div3"). fadeTo ("slow", 0.7 );
});
5. The jQuery slideDown () method is used to slide down an element.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). slideDown (speed, callback );
Copy codeThe Code is as follows:
$ ("# Flip"). click (function (){
$ ("# Panel"). slideDown ();
});
6. The jQuery slideUp () method is used to move an element up.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). slideUp (speed, callback );
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after sliding.
7. The jQuery slideToggle () method can be switched between the slideDown () and slideUp () methods.
If the elements slide down, slideToggle () can slide them up.
If the elements slide up, slideToggle () can slide down them.
Copy codeThe Code is as follows:
$ (Selector). slideToggle (speed, callback );
8. The jQuery animate () method is used to create custom animations.
Syntax:
Copy codeThe Code is as follows:
$ (Selector). animate ({params}, speed, callback );
The required params parameter defines the CSS attributes of the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or millisecond.
The optional callback parameter is the name of the function executed after the animation is completed.
You can also define a relative value (this value is relative to the current value of the element ). + = Or-= must be added before the value:
You can also define a group of animate to implement the queue function.
The following example demonstrates the simple application of the animate () method. It moves the <div> element to the left until the left attribute is 250 pixels:
Instance
Copy codeThe Code is as follows:
$ ("Button"). click (function (){
$ ("Div"). animate ({left: '250px '});
});
9. The jQuery stop () method is used to stop an animation or effect before they are completed.
10. Call the Callback function when animation 100% is complete.
Typical Syntax:
Copy codeThe Code is as follows:
$ (Selector). hide (speed, callback)
11. jQuery method Link
Some elements only need to be retrieved once, so you can append them using links.
Is the method. For example
Copy codeThe Code is as follows:
$ ("# P1" ).css ("color", "red"). slideUp (2000). slideDown (2000 );