jQuery,fade Toggle()

    jQuery,“一个优秀的JS库，大型开发必备”,常用方法，淡入淡出切换方法----fadeToggle();example：jQuery+javascript+DOM多技术结合式切换效果
    section 01:fadeToggle() 
              功能："fade-in and fade-out"
     syntax:
              $(selector).fadeToggle(speed.callback);  
              speed-argument:slow,fast,毫秒  
       section 02:example
       /*common*/
   *{margin:0;padding:0;}
   body{font-family:"微软雅黑",sans-serif;}
   li a{display:block;color:#fff;text-decoration:none;}
   ul{list-style:none;}
   .container{width:1500px;height:200px;margin:25px auto;background:#FFC;}
   .square{
       width:200px;
       height:50px;
       background:gray;
       opacity:0.5;
       margin:25px;
       display:inline-block;
       }
    #square2{
       width:200px;
       height:50px;
       background:gray;
       opacity:0.5;
       margin:25px;
       display:inline-block;
       }
     .square3{
       width:200px;
       height:50px;
       background:gray;
       opacity:0.5;
       margin:25px;
       display:inline-block;
       }
    #description{
        margin:25px;
        margin-left:50px;
        display:inline-block;
        }
    /*三根横线*/
    #control{width:30px;height:50px;float:left;margin-right:15px;}
    #control p{
        border-bottom:2px solid gray;
        padding-top:3px;
        }
    .txt{height:30px;width:45px;}
<script>
     $(document).ready(function() {//文档树加载完成后在执行js
         var square=document.getElementsByClassName("square");//DOM,get方法
             square[0].style.color="red";
             square[0].style.background="#F93";
         var square2=document.getElementById("square2");//DOM,get方法
             square2.style.color="blue";
             square2.style.background="#996699";
    });

     $(document).ready(function() {
        $("#fadeToggle").click(function(){
             $(".square").fadeToggle();
             $("#square2").fadeToggle("slow",function(){
                    $(".txt").css("background","gray"); 
                    $(".txt").text("切换第二个方块！");
                 
                 }); 
              $(".square3").fadeToggle(3000)
            });
    });
    
            
    
</script>

<div class="container">
       <div class="square" >
        This is txt.....
       </div>
       <div id="square2" >
        This is txt2.....
       </div>
       <div class="square3" >
        This is txt3.....
       </div>
    </div>
    <div id="description" role="description">
      <div id="control">
       <p>   </p>
       <p>   </p>
       <p>   </p>
      </div>
      <span>第二个方块:</span><span class="txt"></span>
      <div style="display:inline-block;margin-left:25px;">
      <button type="button" id="fadeToggle">fadeToggle</button>
      <button type="button" id="fade02">fade02</button>
      <input type="button" value="click" id="fade03"/>
      </div>
    </div>