jQuery,fade-in&fade-out

翟卓君
2023-12-01

    jQuery,“一个优秀的JS库,大型开发必备”,可以简化js脚本的复杂操作,操作简单,而且提供了大量实用的方法。example:fade-in fade-out.
    section 01:fadeIn(),fadeOut(),fadeToggle() and fadeTo()
              功能:"fade-in fade-out"
     syntax:
              $(selector).fadeIn(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:none;
       }
    .square2{
       width:200px;
       height:50px;
       background:gray;
       opacity:0.5;
       margin:25px;
       display:none;
       }
     .square3{
       width:200px;
       height:50px;
       background:gray;
       opacity:0.5;
       margin:25px;
       display:none;
       }
    #description{
        margin:25px;
        margin-left:50px;
        }
</style>
<script>
      $(function(){
         $("#fade").click(function(){
             $(".square").fadeIn(function(){
                 $(".square").css("display","inline-block");
                 });
             }); 
          $("#fade02").click(function(){
             $(".square2").fadeIn("slow",function(){
                 $(".square2").css("display","inline-block");
                 });
             }); 
            
          $("#fade03").click(function(){
             $(".square3").fadeIn(3000,function(){
                 $(".square3").css("display","inline-block");
                 });
             }); 
          
          
          
          });

</script>
     <div class="container">
       <div class="square" >
        This is txt.....
       </div>
       <div class="square2" >
        This is txt2.....
       </div>
       <div class="square3" >
        This is txt3.....
       </div>
    </div>
    <div id="description" role="description">
      <p class="txt"></p>
      <button type="button" id="fade">fade</button>
      <button type="button" id="fade02">fade02</button>
      <input type="button" value="click" id="fade03"/>
    </div>

 类似资料: