Examples of common jquery special effect methods _ jquery-js tutorial

This article describes examples of jquery's Common special effects. For more information, see section 1. Use jQuery fadeIn () to fade in hidden elements.

Syntax:

The Code is as follows:

$ (Selector). fadeIn (speed, callback );

Instance:

The Code is as follows:

$ ("Button"). click (function (){
$ ("# P1"). fadeIn ();
$ ("# P2"). fadeIn ("slow ");
$ ("# P3"). fadeIn (3000 );
});

2. The jQuery fadeOut () method is used to fade out visible elements.

Syntax:

The 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:

The Code is as follows:

$ (Selector). fadeToggle (speed, callback );

Instance: $ ("button"). click (function (){
$ ("# P1"). fadeToggle ();
$ ("# P2"). fadeToggle ("slow ");
$ ("# P3"). 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

The Code is as follows:

$ ("Button"). click (function (){

$ ("# P1"). fadeTo ("slow", 0.15 );

$ ("# P2"). fadeTo ("slow", 0.4 );

$ ("# P3"). fadeTo ("slow", 0.7 );

});

5. The jQuery slideDown () method is used to slide down an element.

Syntax:

The Code is as follows:

$ (Selector). slideDown (speed, callback );

The Code is as follows:

$ ("# Flip"). click (function (){
$ ("# Panel"). slideDown ();
});

6. The jQuery slideUp () method is used to move an element up.

Syntax:

The 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.

The Code is as follows:

$ (Selector). slideToggle (speed, callback );

8. The jQuery animate () method is used to create custom animations.

Syntax:

The 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.

Move the element to the left until the left attribute is equal to 250 pixels:

Instance

The Code is as follows:

$ ("Button"). click (function (){
$ ("P"). 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:

The 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

The Code is as follows:

$ ("# P1" ).css ("color", "red"). slideUp (2000). slideDown (2000 );