Edit in JSFiddle

$(function () {
    $("#btn_fadeIn").click(function () {
        $("#div1").fadeIn();
    });

    $("#btn_fadeOut").click(function () {
        $("#div1").fadeOut();
    });

    $("#btn_fadeTo").click(function () {
        $("#div1").fadeTo(200, 0.5);
    });

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

<div>
    <input type="button" id="btn_fadeIn" value="fadeIn" />
    <input type="button" id="btn_fadeOut" value="fadeOut" />
    <input type="button" id="btn_fadeTo" value="fadeTo" />
    <input type="button" id="btn_fadeToggle" value="fadeToggle" />
</div>
<div id="div1" style="background-color:blue;width:100px;height:100px;"></div>