jQuery fadeOut() hide() Hide explanations Slide panel jQuery animate()

Hiding - Sliding- Fading jQuery fadeOut() 演示简单的 jQuery fadeout() 函数。 jQuery hide() 演示简单的 jQuery hide() 函数。 Hide explanations 演示如何隐藏部分文本。 Slide panel 演示简单的 Slide Panel 效果。 jQuery animate() 演示简单的 jQuery animate() 函数。   <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); $("#test").click(function(){ $(this).fadeOut(); }); $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head>   <body> <p>If you click on me, I will disappear.</p> <div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div> <p>如果您点击上面的框，它会淡出。</p>   <h3>Island Trading</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Helen Bennett<br /> Garden House Crowther Way<br /> London</p> </div>   <h3>Paris Trading</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Marie Bertrand<br /> 265, Boulevard Charonne<br /> Paris</p> </div>   <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div>   <p class="flip">请点击这里</p>   <p><a href="#" id="start">Start Animation</a></p>   <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body>   </html> 演示结果： http://www.dgtaixi.com/

posted on 2011-12-01 17:19  xieguang133  阅读(167)  评论(0)    收藏  举报

导航