Description:

Display matched elements by fading them to opaque. In simple word, its animates the opacity for the matched elements.

Syntax

.fadeIn(

[duration ] [easing] [callback] )

$(“#div”).fadeIn(“slow”);

Duration/speed  It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing  It specifies the easing function to be used for transition (default value: swing).
Callback A function to call once the animation is complete.

Example: Without Option(parameter)

From the below code, the “divFadeBox” element has been set to display:none. So initially it will not visible during the page load. After clicking “divButton”, the fadeIn() will be executed to the “divFadeBox” element.

Output: 

After clicking “Click to fade in boxes” button, then the blue box will be fadeIn as shown below.

dotnet-helpers-jquery-effects-fade-in

Example : With Option(parameter)

Output

Before button click

dotnet-helpers-jquery-effects-fade-in-with-callback

After button click, it will be fade-in with duration of 2000 milli second & swing effect. After fade-in completed, callback method will be executed. Finally “fadein() is now complete” text will be append to the button button as shown below.

$(“#divButton”).attr(‘value’, ‘fadeIn() is now Complete‘);

dotnet-helpers-jquery-effects-fade-in-with-callback-output

 

Other Popular Articles