Getting Started with jquery (6) Fade effect

JQuery provides the following ways to achieve the fade effect shown:

FadeIn ()

Fadeout ()

Fadetoggle ()

Fadeto ()

FadeIn () method

FadeIn () implements the fade effect with the following basic syntax:

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

Optional parameter speed gives the time to fade in, you can use "slow", "fast", or a value (microseconds)

The Second optional parameter is the callback function, which is invoked after the Fadein () method finishes.

$ ("button"). Click (function () {     
  $ ("#center1"). FadeIn ();     
  $ ("#center2"). FadeIn ("slow");     
  $ ("#center3"). FadeIn (3000);     

Fadeout () method

Fadeout () implements the fade effect, its basic syntax is as follows:

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

Optional parameter speed gives the time to fade in, you can use "slow", "fast", or a value (microseconds)

The Second optional parameter is the callback function, which is invoked after the Fadein () method finishes.

$ ("button"). Click (function () {     
  $ ("#center1"). fadeout ();     
  $ ("#center2"). Fadeout ("slow");     
  $ ("#center3"). Fadeout (3000);     

Fadetoggle () method

Fadetoggle () alternately Fadein () and fadeout (), if the element is faded, fadetoggle () fades into the element, and Fadetoggle fades out if the element was previously in the fade.

The basic syntax is as follows:

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

Optional parameter speed gives the time to fade in, you can use "slow", "fast", or a value (microseconds)

The Second optional parameter is the callback function, which is invoked after the Fadein () method finishes.

In the following example, after clicking the button, you can alternately fade in three rectangles.

<! DOCTYPE html>