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.

  1. fadeIn() - Display the matched elements with fade in effect.
  2. fadeOut() - Hide the matched elements with fade out / transparent effect.
  3. fadeToggle() - Toggles between the fadeIn() and fadeOut() methods.
  4. fadeTo() - Fading the matched elements to certain opacity.

jQuery fadeIn() Method

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);
  });
});

Run it...   »

jQuery fadeOut() Method

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);
  });
});

Run it...   »

jQuery fadeToggle() Method

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);
  });
});

Run it...   »

jQuery fadeTo() Method

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);
  });
});

Run it...   »

Here are all jQuery effects references, see all jQuery effects references.