Jquery动画效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //进入 10 $("#b1").click(function (){ 11 $("#p1").show(); 12 }); 13 //消失 14 $("#b2").click(function (){ 15 $("#p1").hide(); 16 }) 17 //渐入 18 $("#b3").click(function (){ 19 $("#d1").fadeIn(); 20 }) 21 //渐出 22 $("#b4").click(function (){ 23 $("#d1").fadeOut(); 24 }) 25 //键入检出开关 26 $("#b5").click(function (){ 27 //$("#d1").fadeToggle(); 28 //$("#d1").fadeToggle("slow"); 29 $("#d1").fadeToggle(1000); 30 }) 31 //透明度 32 $("#b6").click(function (){ 33 $("#d1").fadeTo("slow",0.1); 34 $("#d2").fadeTo("slow",0.5); 35 $("#d3").fadeTo("slow",0.9); 36 }) 37 38 39 //向上向下滑动 40 //向下滑动 41 $("#b7").click(function (){ 42 $("#d4").slideDown("slow"); 43 }) 44 //向上滑动 45 $("#b8").click(function (){ 46 $("#d4").slideUp("slow"); 47 }) 48 $("#b9").click(function(){ 49 $("#d5").animate({left:'500px'},'slow'); 50 }) 51 $("#b10").click(function(){ 52 $("#d5").animate({ 53 left:'500px', 54 opacity:0.5, 55 height:'150px', 56 width:'150px' 57 },'slow');}) 58 $("#b11").click(function(){ 59 $("#d5").animate({ 60 left:'500px', 61 opacity:0.5, 62 height:'+=150px', 63 width:'+=150px' 64 },'slow');}); 65 $("#b12").click(function (){ 66 $("#p2").show(function(){ 67 alert("问候小日本！"); 68 }); 69 }); 70 $("#b13").click(function(){ 71 $("#d6").animate({left:'500px'},'slow'); 72 }); 73 $("#b14").click(function(){ 74 $("#d6").stop(); 75 }) 76 }); 77 78 </script> 79 </head> 80 <body> 81 <input id="b1" name="b1" type="button" value="出来"/> 82 <input id="b2" name="b2" type="button" value="滚吧！"> 83 <p id="p1">小日本</p> 84 <hr/> 85 <input id="b3" name="d1" type="button" value="渐入"/> 86 <input id="b4" name="d2" type="button" value="渐出"/> 87 <input id="b5" name="d3" type="button" value="渐入渐出开关"/> 88 <input id="b6" name="d4" type="button" value="透明度"/> 89 <div id="d1" style="width:100px; height:100px; background-color:orange;margin: 10px; "></div> 90 <div id="d2" style="width:100px; height:100px; background-color:red;margin: 10px; "></div> 91 <div id="d3" style="width:100px; height:100px; background-color:green;margin: 10px; "></div> 92 <hr/> 93 <input type="button" id="b7" name="b7" value="向下滑动"/> 94 <input type="button" id="b8" name="b8" value="向上滑动"/> 95 <div id="d4" style="width:100px; height:100px;display: none;background-color:gray"> 96 <p>java1234</p> 97 <p>java1234屌炸天</p> 98 </div> 99 <hr/> 100 <input id="b9" name="b9" type="button" value="向左移动"/> 101 <input id="b10" name="b10" type="button" value="动画效果牛逼！"/> 102 <input id="b11" name="b11" type="button" value="动画效果吊炸天！！"/> 103 <hr/> 104 <!-- <div id="d5" style="background-color: red;width:100px;height:100px;position: absolute; margin: 10px"></div> 105 --> 106 <input id="b12" name="b12" type="button" value="回调事件！"/> 107 <p id="p2" style="display: none">鬼子进村了</p> 108 <hr/> 109 <input id="b13" name="b13" type="button" value="向左移动！"/> 110 <input id="b14" name="b14" type="button" value="停止！"/> 111 <div id="d6" style="background-color: red;width:100px;height:100px;position: absolute; margin: 10px"></div> 112 </body> 113 </html>
如上所示：
1、Jquery隐藏与显示DOM
2、Jquery淡入与淡出DOM
3、Jquery滑动DOM
4、jquery动画
5、Jquery callBack回调方法
6、Jquery暂停动画
