jQuery4

来源：互联网发布：淘宝瑕疵冰箱可靠吗编辑：程序博客网时间：2024/05/29 10:18
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){/*测试fadeIn()方法*/  $("#showfadeIn").click(function(){    $("#div1").fadeIn();    $("#div2").fadeIn("slow");    $("#div3").fadeIn(3000);  });/*测试fadeOut()方法*/ $("#showfadeOut").click(function(){    $("#div4").fadeOut();    $("#div5").fadeOut("slow");    $("#div6").fadeOut(3000);  });/*测试fadeToggle()方法*/ $("#showfadeToggle").click(function(){ $("#div7").fadeToggle(); $("#div8").fadeToggle("slow"); $("#div9").fadeToggle(3000); }); $("#showfadeTo").click(function(){ $("#div10").fadeTo("slow",0.15); $("#div11").fadeTo("slow",0.4); $("#div12").fadeTo("slow",0.7); });});</script></head><body><button id="showfadeIn">演示fadeIn()方法</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><br><button id="showfadeOut">演示fadeOut()方法</button><div id="div4" style="width:80px;height:80px;background-color:red;"></div><br><div id="div5" style="width:80px;height:80px;background-color:green;"></div><br><div id="div6" style="width:80px;height:80px;background-color:blue;"></div><br><button id="showfadeToggle">演示fadeToggle()方法</button><div id="div7" style="width:80px;height:80px;background-color:red;"></div><br><div id="div8" style="width:80px;height:80px;background-color:green;"></div><br><div id="div9" style="width:80px;height:80px;background-color:blue;"></div><br><button id="showfadeTo">演示fadeTo()方法</button><div id="div10" style="width:80px;height:80px;background-color:red;"></div><br><div id="div11" style="width:80px;height:80px;background-color:green;"></div><br><div id="div12" style="width:80px;height:80px;background-color:blue;"></div><br></body></html>
阅读全文
0 0