Fork me on GitHub

jquery淡入淡出

html代码:

<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>

js代码:

 $(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);
    });
  });

 

posted on 2015-02-02 16:51  骑着乌龟漫步  阅读(136)  评论(0编辑  收藏  举报

导航