Soft technology class: jQuery effect fade in and fade out

Time:2020-5-19

JQuery fading method

With jQuery, you can implement the fade in and fade out effect of elements.

JQuery has the following four fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

Jquery fadein() method

Jquery fadein() is used to fade in hidden elements.

Syntax:

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

 

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or milliseconds.

The optional callback parameter is the name of the function executed after fading completes.

The following example demonstrates the fadein () method with different parameters:

example

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

 

Jquery fadeout() method

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

Syntax:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or milliseconds.

The optional callback parameter is the name of the function executed after fading completes.

The following example demonstrates the fadeout () method with different parameters:

example

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

Jquery fadetoggle() method

The jQuery fadetoggle() method can switch between fadein() and fadeout() methods.

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

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

Syntax:

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

 

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or milliseconds.

The optional callback parameter is the name of the function executed after fading completes.

The following example demonstrates the fadetoggle () method with different parameters:

example

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

 

Jquery fadeto() method

The jQuery fadeto() method allows gradients to be given opacity values between 0 and 1.

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

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

The optional callback parameter is the name of the function executed after the function completes.

The following example demonstrates the fadeto () method with different parameters:

example

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

———————————————————————————————————————————

Article source: www.sysoft.net.cn, plus V: 15844800162 in-depth communication

Recommended Today

Using face + + to realize portrait matting

Face + + document address: https://console.faceplusplus.com.cn/documents/4887579 Interface address of face + + portrait matting https://api-cn.faceplusplus.c… Parameter Description: Required or not Parameter name type Parameter description Mandatory api_key string Call the API key of this API Mandatory api_secret string API secret calling this API Mandatory image_base64 string Base64 encoded binary image data Optional return_grayscale int The […]