fade

Includes : fadeIn, fadeOut, fadeToggle

by sum1

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<span id="showdiv">fade In Down</span>

<span id="hidediv">fade Out</span>

<span id="togglediv">Fade Toggle</span>

<span id="todiv">Fade To</span>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<p>Animation complete</p>

CSS

div {
    display:none;
    margin:10px;
    background-color:royalblue;
    color:white;
    padding:10px;
    width:200px;
}
span {
    border:1px solid gray;
    padding:5px;
    background-color:yellow;
}
p {
    display:none;
    background-color:red;
    color:white;
    padding:20px;
    margin:10px;
    width:200px;
}

JavaScript

$("#showdiv").click(function () {
    $("div").fadeIn(2000, "swing", function msg() {
        $("p").show("slow");
    });
});

$("#hidediv").click(function () {
    $("div").fadeOut(2000, function msg() {
        $("p").hide("slow");
    });
});

$("#togglediv").click(function () {
    $("div").fadeToggle("slow");
});

$("#todiv").click(function () {
    $("div").fadeTo("slow", 0.5);
});