jQuery - fading()

Common fading methods:

• fadeIn - used to fade in a hidden element
• fadeOut - used to fade out a hidden element
• fadeToggle - toggles between the fadeIn() and fadeOut() methods
• fadeTo - allows fading to a given opacity (value between 0 and 1)

http://www.w3schools.com/jquery/jquery_fade.asp

Fade In Example

Click to fade in boxes

 

Fade Out Example

Fade Out Example

 

FadeToggle Example

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out.

Fade Toggle

 

FadeTo Example

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).

The optional callback parameter is a function to be executed after the function completes.

Fade To Example

 

 

$(document).ready(function ()
{
    $("#btnFadeIn").click(function ()
    {
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(5000);
    });

    $("#btnFadeOut").click(function ()
    { $("#demo2").fadeOut(2000); });

    $("#btnFadeToggle").click(function ()
    { $("#demo3").fadeToggle(3000); });

    $("#btnFadeTo").click(function ()
    { $("#demo4").fadeTo(4000, 0.25, function(){ alert("all done"); }); });
});