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">qqqqqqqqqqqqqdiv>
<div id="div2" style="background:#00FF00;width:200px;height:200px">eeeeeeeeeeeeeeediv>
<div id="div3" style="background:#0000FF;width:200px;height:200px">ggggggggggggggggggdiv>

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

 

你可能感兴趣的:(jquery淡入淡出)