fadeIn()淡入fadeOut()淡出fadeToggle()切换fadeTo()透明度筋斗云网络

语法：
$(selector).fadeIn(speed,callback); 用于淡入已隐藏的元素display:none。
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
speed效果时长，以下值："slow"、"fast" 或毫秒。
callback参数是 fading 完成后所执行的函数名称。
$(selector).fadeTo(speed,opacity,callback);
效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
完成后所执行的函数名称

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style media="screen">
  div{
    width:80px;
    height:80px;
  }
</style>

<script>
$(document).ready(function(){
  $(".fadei").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(2000);
  });
});


$(document).ready(function(){
  $(".fadeo").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(2000,function(){
      alert('执行完毕,可以执行函数')
    });
  });
});

$(document).ready(function(){
  $(".fadeToggle").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(2000);
  });
});

$(document).ready(function(){
  $(".fadeTo").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.9);
  });
});
</script>

<body>
<button class="fadei">点击淡入fadeIn()</button>
<button class="fadeo">点击淡出fadeOut()</button>
<button class="fadeToggle">淡入淡出相互切换fadeToggle()</button>
<button class="fadeTo">淡出透明度fadeTo()</button>
<br><br>
<div id="div1" style="display:none;background-color:red;"></div>
<br>
<div id="div2" style="display:none;background-color:green;"></div>
<br>
<div id="div3" style="display:none;background-color:blue;"></div>
</body>