1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JQ动画效果测试</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script> 8 $(function(){ 9 10 $("#btn1").click(function(){ 11 $("#img1").show(3000); 12 }); 13 14 $("#btn2").click(function(){ 15 $("#img1").hide(3000); 16 }); 17 18 $("#btn3").click(function(){ 19 $("#img1").slideDown(3000); 20 }); 21 22 $("#btn4").click(function(){ 23 $("#img1").slideUp(3000); 24 }); 25 26 $("#btn5").click(function(){ 27 $("#img1").fadeIn(3000); 28 }); 29 30 $("#btn6").click(function(){ 31 $("#img1").fadeOut(3000); 32 }); 33 34 $("#btn7").click(function(){ 35 $("#img1").animate({width:"1200px",opacity:"1"},3000); 36 }); 37 38 $("#btn8").click(function(){ 39 $("#img1").animate({width:"200px",opacity:"0.2"},3000); 40 }); 41 }); 42 </script> 43 </head> 44 <body> 45 <input type="button" value="show()" id="btn1"/> 46 <input type="button" value="hide()" id="btn2"/> 47 <input type="button" value="slideDown()" id="btn3"/> 48 <input type="button" value="slideUp()" id="btn4"/> 49 <input type="button" value="fadeIn()" id="btn5"/> 50 <input type="button" value="fadeOut()" id="btn6"/> 51 <input type="button" value="animate()" id="btn7"/> 52 <input type="button" value="animate()" id="btn8"/><br /> 53 <img src="../img/1.jpg" id="img1" width="1200px"/> 54 </body> 55 </html>