jQuery fadeIn | Using fadeIn() method of jQuery with example code

First, A Short Video of this Tutorial

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 fading effect that jquery makes quite easier to do.

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

Running example of fadein() method

In this example, as you click “Fadein method jquery” button it will display three hidden blocks with fast, slow and 3000 milliseconds. In real time this can be text, images content etc. contained in div or p.

jQuery fadeIn

Experience this example online

Also see jquery fadeout() method | jquery fadeToggle() method