JQuery provides the following methods to achieve the fade-in and fade-out effect: fadeIn () fadeOut () fadeToggle () fadeTo () fadeIn () method fadeIn () achieves the fade-in effect, the basic syntax is as follows: $ (selector ). fadeIn (speed, callback); the optional parameter speed provides the time for the fade-in effect. You can use "slow", "fast", or a value (microsecond). The second optional parameter is the callback function, it is called after the fadeIn () method is complete. [Javascript] $ ("button "). click (function () {$ ("# div1 "). fadeIn (); $ ("# div2 "). fadeIn ("slow"); $ ("# div3 "). fadeIn (3000) ;}); $ ("button "). click (function () {$ ("# div1 "). fadeIn (); $ ("# div2 "). fadeIn ("slow"); $ ("# div3 "). fadeIn (3000) ;}); The fadeOut () method fades out. The basic syntax is as follows: $ (selector ). fadeOut (speed, callback); the optional parameter speed provides the time for the fade-in effect. You can use "slow", "fast", or a value (microsecond). The second optional parameter is the callback function, it is called after the fadeIn () method is complete. [Javascript] $ ("button "). click (function () {$ ("# div1 "). fadeOut (); $ ("# div2 "). fadeOut ("slow"); $ ("# div3 "). fadeOut (3000) ;}); $ ("button "). click (function () {$ ("# div1 "). fadeOut (); $ ("# div2 "). fadeOut ("slow"); $ ("# div3 "). fadeOut (3000) ;}); The fadeToggle () method performs fadeIn () and fadeOut () alternately. If the element fades out, fadeToggle () fades in, if it is previously fade in, fadeToggle will fade out this element. The basic syntax is as follows: $ (selector ). fadeToggle (speed, callback); the optional parameter speed provides the time for the fade-in effect. You can use "slow", "fast", or a value (microsecond). The second optional parameter is the callback function, it is called after the fadeIn () method is complete. In the following example, after clicking the button, you can fade out three rectangles. [Javascript] <! DOCTYPE html>