jQuery fadeIn () method

For a well-designed web site, showing images or text upon certain action by the visitor of website or transition in images for marketing pictures leaves a good impression. This is a fading effect that jquery makes quite easier to do.

fadeIn with fast value fadeIn in milliseconds demo

jQuery fadeIn() method allows to fade-in elements of website, for example, <div> or <p> etc. that may contain text, images or other content. It slowly changes the opacity of the given element from hidden to visible.

Syntax of fadein()



Selector = can be an element like div, p, etc.

Speed = Optional parameter that specifies the fadeIn speed with possible values of

  1. “slow”
  2.  “fast”
  3. Or value in milliseconds

Callback = after fadeIn () method is completed, an optional callback function to perform certain action can be given.

The example of using fadeIn with fast value

In this example, as you click “Execute fadeIn” button it will display three hidden blocks with the “fast” value for speed that is assigned in the fadeIn method of jQuery. In real time this can be text, images content etc. contained in div or p.

Experience this example online

The code:


The example of using slow value

Again, I am using the jQuery fadeIn method with three boxes but this time with “slow” value for all three boxes. See the code and output by clicking the link below:

Experience this example online

The code:

Using duration in milliseconds example

For this example, I am using three different values for boxes with time in milliseconds. The first box is given then 1000 value i.e. one second.

The second box is assigned the 3000 milliseconds (3 seconds) while the third one with 6000 value i.e. six seconds. Give it a try:

Experience this example online


Also see jQuery: fadeOut() method | jquery fadeToggle() method