jQuery fade Effects - jQuery fadeIn, fadeOut, fadeToggle and fadeTo Methods

jQuery provides an easy way to implement transparency effect in HTML through jQuery fadeIn, fadeOut, fadeToggle, and fadeTo methods.

jQuery comes with three handy methods to create the fading effect easily.

jQuery fadeIn() method is used to fade in the hidden HTML element.

Syntax

$(selector).fadeIn();        // This syntax does not accept any arguments.

$(selector).fadeIn( [duration], [callback]);

Parameters

duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#click").click(function(){
    $("#slide").fadeIn(3000);
  });
});

jQuery fadeOut() method is used to fade out the visible HTML element.

Syntax

$(selector).fadeOut();        // This syntax does not accept any arguments.

$(selector).fadeOut( [duration], [callback]);

Parameters

duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#click").click(function(){
    $("#slide").fadeOut(3000);
  });
});

jQuery fadeToggle() method is used to toggles between the fadeIn() and fadeOut() methods.

Syntax

$(selector).fadeToggle();        // This syntax does not accept any arguments.

$(selector).fadeToggle( [duration], [callback]);

Parameters

duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#fadetoggle").click(function(){
    $("div").fadeToggle(3000);
  });
});

jQuery fadeTo() method is used to fading the matched elements to certain opacity.

Syntax

$(selector).fadeTo();        // This syntax does not accept any arguments.

$(selector).fadeTo( [duration], opacity, [callback]);

Parameters

duration default: 400 Accept string or number that determining how long animation will run. For example predefined duration ("slow", "normal", "fast"), or number of milliseconds to run the animation (3000, 1000).
opacity Required. Specifies fading to a given opacity (value between 0 and 1).
callback Optional. A function to call once the animation is complete.

Example

$(document).ready(function() {
  $("#fadeTo").click(function(){
    $("div").fadeTo(3000, 0.3);
  });
});

KANSIRIS