Home/Jquery/fadeIn() Effect in Jquery

fadeIn() Effect in Jquery


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



[duration ] [easing] [callback] )


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).
CallbackA 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.


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


Example : With Option(parameter)


Before button click


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‘);



Leave a Reply