标签：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title></title> 5 <script src="jquery-1.8.3.js"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $(‘#btnSlideDown‘).click(function () { 9 $(‘div‘).slideDown(‘fast‘); 10 }); 11 $(‘#btnSlideUp‘).click(function () { 12 $(‘div‘).slideUp(‘normal‘); 13 }); 14 $(‘#btnSlideToggle‘).click(function () { 15 $(‘div‘).slideToggle(‘slow‘); 16 }); 17 $(‘#btnFadeIn‘).click(function () { 18 $(‘div‘).fadeIn(1000); 19 }); 20 $(‘#btnFadeOut‘).click(function () { 21 $(‘div‘).fadeOut(2000); 22 }); 23 $(‘#btnFadeToggle‘).click(function () { 24 $(‘div‘).fadeToggle(3000); 25 }); 26 }); 27 28 </script> 29 </head> 30 <body> 31 <input id="btnSlideDown" type="button" name="name" value="slideDown"> 32 <input id="btnSlideUp" type="button" name="name" value="slideUp" /> 33 <input id="btnSlideToggle" type="button" name="name" value="slideToggle" /> 34 <input id="btnFadeIn" type="button" name="name" value="fadeIn" /> 35 <input id="btnFadeOut" type="button" name="name" value="fadeOut" /> 36 <input id="btnFadeToggle" type="button" name="name" value="fadeToggle" /> 37 <div style="height:300px;width:400px;background-color:green;"> 38 39 </div> 40 </body> 41 </html>
16jquery学习笔记-------动画----两种层显示和隐藏slide、fade
标签：
原文地址：http://www.cnblogs.com/clcloveHuahua/p/5128540.html
