jquery Common effects method using sample _jquery

1. JQuery fadeIn () is used to fade in hidden elements.

Grammar:

Copy Code code as follows:

$ (selector). FadeIn (Speed,callback);

Instance:

Copy Code code as follows:

$ ("button"). Click (function () {
$ ("#div1"). FadeIn ();
$ ("#div2"). FadeIn ("slow");
$ ("#div3"). FadeIn (3000);
});

2. The JQuery fadeout () method is used to fade out the visible elements.

Grammar:

Copy Code code as follows:

$ (selector). fadeout (Speed,callback);

3. The JQuery Fadetoggle () method toggles between the FadeIn () and the Fadeout () method.

If the element has faded out, fadetoggle () adds a fade effect to the element.

If the element fades in, Fadetoggle () adds a fade effect to the element.

Grammar:

Copy Code code as follows:

$ (selector). Fadetoggle (Speed,callback);

Instance: $ ("button"). Click (function () {
$ ("#div1"). Fadetoggle ();
$ ("#div2"). Fadetoggle ("slow");
$ ("#div3"). Fadetoggle (3000);
});

4.. Grammar:

$ (selector). Fadeto (Speed,opacity,callback);

The required speed parameters specify the length of the effect. It can take the following values: "Slow", "fast", or milliseconds.

The required opacity parameter in the Fadeto () method sets the fade effect to the given opacity (the value is between 0 and 1). Instance

Copy Code code 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 the element down.

Grammar:

Copy Code code as follows:

$ (selector). Slidedown (Speed,callback);

Copy Code code as follows:

$ ("#flip"). Click (function () {
$ ("#panel"). Slidedown ();
});

6. The JQuery Slideup () method is used to slide the element up.

Grammar:

Copy Code code as follows:

$ (selector). Slideup (Speed,callback);

Optional speed parameters Specify the effect of the length of time. 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 slide completes.

7. The JQuery Slidetoggle () method toggles between the Slidedown () and the Slideup () method.

If the elements slide down, slidetoggle () can slide them up.

If the elements are sliding up, slidetoggle () can slide them down.

Copy Code code as follows:

$ (selector). Slidetoggle (Speed,callback);

8. The JQuery animate () method is used to create a custom animation.

Grammar:

Copy Code code as follows:

$ (selector). Animate ({params},speed,callback);

The required params parameter defines the CSS property that forms the animation.

Optional speed parameters Specify the effect of the length of time. It can take the following values: "Slow", "fast", or milliseconds.

The optional callback parameter is the name of the function that was executed after the animation was completed.

You can also define a relative value (which is the same as the current value of the element). You need to precede the value with + = or-=:

You can also define a set of animate to implement the queue function.

The following example shows a simple application of the animate () method, which moves the <div> element to the left until it is equal to 250 pixels:

Instance

Copy Code code as follows:

$ ("button"). Click (function () {
$ ("div"). Animate ({left: ' 250px '});
});

9. The JQuery Stop () method is used to stop animations or effects before they are complete

10. When the animation 100% is finished, call the Callback function.

Typical syntax:

Copy Code code as follows:

$ (selector). Hide (Speed,callback)

JQuery Method Link

Some elements can only be retrieved once, so you can append to the method using the link.

Is the method point method. Such as

Copy Code code as follows:

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