一、隐藏与显示

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="index.js"></script><linktype="text/css"rel="stylesheet"href="style.css"/></head><body><!--<p>hello</p><buttonid="hide">隐藏</button><buttonid="show">显示</button><buttonid="toggle">隐藏/显示</button>--><script>for(vari=0;i<5;i++){$("<div>").appendTo(document.body);}$("div").click(function(){$(this).hide(2000,function(){$(this).remove();});});</script></body></html>$(document).ready(function(){$("#hide").click(function(){$("p").hide(1000);});$("#show").click(function(){$("p").show(1000);});$("#toggle").click(function(){$("p").toggle(500);});});div{background:aqua;width:50px;height:50px;margin:2px;float:left;}


二、淡入淡出

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="jquery-1.10.1.min.js"></script><scriptsrc="fade.js"></script></head><body><buttonid="in">fadeIn</button><buttonid="out">fadeOut</button><buttonid="toggle">fadeToggle</button><buttonid="to">fadeTo</button><divid="div1"></div><divid="div2"></div><divid="div3"></div></body></html>$(document).ready(function(){$("#in").on("click",function(){$("#div1").fadeIn(1000);$("#div2").fadeIn(1000);$("#div3").fadeIn(1000);});$("#out").on("click",function(){$("#div1").fadeOut(1000);$("#div2").fadeOut(1000);$("#div3").fadeOut(1000);});$("#toggle").on("click",function(){$("#div1").fadeToggle(1000);$("#div2").fadeToggle(1000);$("#div3").fadeToggle(1000);});$("#to").on("click",function(){$("#div1").fadeTo(1000,0.5);$("#div2").fadeTo(1000,0.7);$("#div3").fadeTo(1000,0.3);});});