jQuery fade | tutorials with examples

Last updated on Aug 30, 2016

Milan Sanathara

jQuery / JS


jQuery fadeIn / fadeOut Examples

We have shaded light on jQuery animation,jQury interactive UI development as well as other jQuery features.In this blog we are focusing on jQuery fading effects and  jQuery fadeIn / fadeOut Examples.

The meaning of Fade is gradually growing faint and disappear,jQuery fading exactly does this on DOM element.

In jQuery, The fade effect hides or shows an element by fading it.

Following are the types of jQuery Fading effects:

  • .fadeIn()
  • .fadeOut()
  • .fadeToggle()
  • .fadeTO()

TO start learning you should have some basic idea of following key-features of fading effects.

Duration : A string or number determining how long the animation will run.

Easing : A string indicating which easing function to use for the transition.

Complete : A function to call once the animation is complete, called once per matched element.

jQuery fadeIn() Method :

The jQuery fadeIn() method is used to fade in a hidden element.

In the fadeIn() method, we can pass three parameters to the method.

Basic use of FadeIn effect :

Note : First include following js

FadeIn a block over content:

Fade In child Element One By One :

jQuery .each() function :

Basically, the jQuery .each() function is used to loop through each element of the target jQuery object. Very useful for multi-element DOM manipulation, looping arrays and object properties.

FadeOut jQuery Method :

FadeOut All one by One :

FadeToggle jQuery Method :

It is the combined method of fadeIn and fadeOut.

While there is a need for hiding/show any element with fading effect,we can use the fadeToggle method in place of both fadeIn and fadeOut.

fadeTo jQuery Method :

The fadeTo( ) method fades the opacity of all matched elements to a specified opacity and firing an optional callback after completion.

Syntax :

Parameters :

speed : A string representing one of the three predefined speeds (“slow”, “def”, or “fast”) or the number of milliseconds to run the animation (e.g. 1000).

opacity : A number between 0 and 1 denoting the target opacity.

callback : This is an optional parameter representing a function to call once the animation is complete.


Live demo fo jQuery fading effects


Live demo fo jQuery fading effects


I hope you will find this post very useful regarding jQuery Fading effects. Let me know any questions if you have in comment regarding fading effects. I will reply you ASAP.

Have you got a cool idea about Web Development ? Contact us Now to get a free consultation on your idea.  Alphanso Tech is rated as one of the best Website Development Company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

One Response to jQuery fade | tutorials with examples

  1. Pingback: jQuery navigation menu examples | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *