<button id="b1" type="button">淡出</button>

<button id="b2" type="button">淡入</button>

<button id="b3" type="button">淡入淡出</button>

<button id="b4" type="button">透明度</button>

<div id="div1" style="background:red;width:200px;height:200px">qqqqqqqqqqqqq</div>

<div id="div2" style="background:#00FF00;width:200px;height:200px">eeeeeeeeeeeeeee</div>

<div id="div3" style="background:#0000FF;width:200px;height:200px">gggggggggggggggggg</div>

 $(function(){

    $("#b1").click(function(){

        $("#div1").fadeOut();

        $("#div2").fadeOut("slow");

        $("#div3").fadeOut(3000);

    });

    $("#b2").click(function(){

        $("#div1").fadeIn();

        $("#div2").fadeIn("slow");

        $("#div3").fadeIn(3000);

    });

    $("#b3").click(function(){

        $("#div1").fadeToggle();

        $("#div2").fadeToggle("slow");

        $("#div3").fadeToggle(3000);

    });

    $("#b4").click(function(){

          $("#div1").fadeTo("slow",0.15);

          $("#div2").fadeTo("slow",0.4);

          $("#div3").fadeTo("slow",0.7);

    });

  });