1 <html> 2 <head> 3 <!--导入js文件后才可以使用JQuery--> 4 <script src="http://how2j.cn/study/jquery.min.js"></script> 5 <script type="text/javascript"> 6 $(function(){ 7 var div=$("#d"); 8 9 /* 10 显示/隐藏函数 11 */ 12 $("#b1").click(function(){ 13 //隐藏函数 14 div.hide(); 15 }); 16 $("#b2").click(function(){ 17 //显示函数 18 div.show(); 19 }); 20 $("#b3").click(function(){ 21 //隐藏/显示切换函数 22 div.toggle(); 23 }); 24 25 $("#b4").click(function(){ 26 //延时1ms后显示 27 div.show(1000); 28 }); 29 $("#b5").click(function(){ 30 //延时1ms后隐藏 31 div.hide(1000); 32 }); 33 $("#b6").click(function(){ 34 //延时1ms后隐藏/显示切换 35 div.toggle(1000); 36 }); 37 38 39 /* 40 滑动函数 41 */ 42 $("#b7").click(function(){ 43 //向上滑动函数 44 div.slideUp(); 45 }); 46 $("#b8").click(function(){ 47 //向下滑动函数 48 div.slideDown(); 49 }); 50 $("#b9").click(function(){ 51 //滑动切换函数 52 div.slideToggle(); 53 }); 54 $("#b10").click(function(){ 55 //延时1ms后向上滑动 56 div.slideUp(1000); 57 }); 58 $("#b11").click(function(){ 59 //延时1ms后向下滑动 60 div.slideDown(1000); 61 }); 62 $("#b12").click(function(){ 63 //延时1ms后滑动切换 64 div.slideToggle(1000); 65 }); 66 67 /* 68 淡入淡出函数 69 */ 70 $("#b13").click(function(){ 71 //淡入函数 72 div.fadeIn(); 73 }); 74 $("#b14").click(function(){ 75 //淡出函数 76 div.fadeOut(); 77 }); 78 $("#b15").click(function(){ 79 //淡入/淡出切换函数 80 div.fadeToggle(); 81 }); 82 $("#b16").click(function(){ 83 //延时1ms淡入 84 div.fadeIn(1000); 85 }); 86 $("#b17").click(function(){ 87 //延时1ms淡出 88 div.fadeOut(1000); 89 }); 90 $("#b18").click(function(){ 91 //延时1ms淡入/淡出切换 92 div.fadeToggle(1000); 93 }); 94 95 /* 96 自定义动画效果 97 在使用的div中必须加上：position:relative; 98 */ 99 $("#a1").click(function(){ 100 //div的x轴为100px，y轴不变(原点),延时2ms进入到指定坐标 101 div.animate( {left:'100px'} , 2000); 102 //div的x轴为0px，y轴为50px,延时2ms进入到指定坐标,并把高设置位50px 103 div.animate( {left:'0px' , top:'550px' , height:'50px'} , 2000); 104 }); 105 106 /* 107 带有回调函数 108 自定义动画效果 109 在使用的div中必须加上：position:relative; 110 */ 111 $("#a1").click(function(){ 112 //div的x轴为100px，y轴不变(原点),延时2ms进入到指定坐标 113 div.animate( {left:'100px'} , 2000); 114 //div的x轴为0px，y轴为50px,延时2ms进入到指定坐标,并把高设置位50px 115 div.animate( {left:'0px' , top:'550px' , height:'50px'} , 2000 , function(){alert("动画结束"); 116 }); 117 }); 118 }); 119 120 </script> 121 122 <style type="text/css"> 123 #d{ 124 width: 100px; 125 height: 300px; 126 border: 3px solid red; 127 position:relative; 128 } 129 </style> 130 </head> 131 132 133 <body> 134 <button id="b1">隐藏</button> 135 <button id="b2">显示</button> 136 <button id="b3">隐藏/显示切换</button> 137 <button id="b4">延时显示</button> 138 <button id="b5">延时切换</button> 139 <button id="b6">延时显示/隐藏</button> 140 <br> 141 <button id="b7">向上滑动</button> 142 <button id="b8">向下滑动</button> 143 <button id="b9">滑动切换</button> 144 <button id="b10">延时向上滑动</button> 145 <button id="b11">延时向下滑动</button> 146 <button id="b12">延时滑动切换</button> 147 <br> 148 <button id="b13">淡出</button> 149 <button id="b14">淡入</button> 150 <button id="b15">淡出/淡出切换</button> 151 <button id="b16">延时淡出</button> 152 <button id="b17">延时淡入</button> 153 <button id="b18">延时淡出/淡出切换</button> 154 <br> 155 <button id="a1">自定义动画效果</button> 156 <br> 157 <br><br> 158 <div id="d"> 159 {实验用的div} 160 </div> 161 162 </body> 163 164 </html>