jQuery,fade-in&fade-out

    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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值