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;200px;height:200px">qqqqqqqqqqqqq</div> <div id="div2" style="background:#00FF00;200px;height:200px">eeeeeeeeeeeeeee</div> <div id="div3" style="background:#0000FF;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); }); });