jQuery Fading Effects: fadeIn, fadeOut, fadeTo, fadeToggle

The fadeIn() function gradually increases the opacity from hidden to visible (fading effect).

It should be noted that you will not be able to see the hidden items as it doesn’t affect the layout of the page.

Tip: This function is frequently combined with the fadeOut() method.

Syntax for fadeIn method in jQuery

$(selector).fadeIn(speed,easing,callback)

Example of jQuery fadeIn function 

In all

elements, fade:

$("button").click(function(){
  $("p").fadeIn();
});

The fadeOut() method in jQuery uses the fading effect to make changes to the opacity from visible to hidden. 

It should be noted that you will not be able to see the hidden items as it doesn’t affect the layout of the page.

Tip: This function is frequently combined with the fadeIn() method.

Syntax for fadeOut method in jQuery

$(selector).fadeOut(speed,easing,callback)

Example of jQuery fadeOut function

All

elements should be faded out:

$("button").click(function(){
  $("p").fadeOut();
});

Toggles between the fadeIn() and fadeOut() methods with the fadeToggle() method.

FadeToggle() will fade the items back in if they are faded out.

FadeToggle() will fade out elements that have been faded in.

Note that hidden items will not be visible (no longer affects the page's layout).

Syntax for fadeToggle method in jQuery

$(selector).fadeToggle(speed,easing,callback)

Example of jQuery fadeToggle function

Toggle between different boxes that fade in and out:

$("button").click(function(){
  $("#div1").fadeToggle();
});

The fadeTo() method progressively increases the opacity of selected items until it reaches the desired level (fading effect).

Syntax for fadeTo method in jQuery

$(selector).fadeTo(speed,opacity,easing,callback)

Example of jQuery fadeTo function

Change the opacity of all

elements gradually:

$("button").click(function(){
  $("p").fadeTo(1000, 0.4);
});