标签：
//隐藏显示 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>index.html</title> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <p id="p1">如果点击“隐藏”按钮，我就会消失</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> <button id="toggle" type="button">切换</button> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(1000); }); $("#show").click(function(){ $("p").show(1000); }); $("#toggle").click(function(){ $("p").toggle(1000); }); }); </script> </body> </html> //淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8"> <title>index.html</title> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <button id="fadeIn" type="button">淡入</button> <button id="fadeOut" type="button">谈出</button> <button id="toggle" type="button">切换</button> <button id="fadeTo" type="button">fadeTo</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div> <script> $(document).ready(function(){ $("#fadeIn").click(function(){ $("#div1").fadeIn(3000); }); $("#fadeOut").click(function(){ $("#div1").fadeOut(1000); }); $("#toggle").click(function(){ $("#div1").fadeToggle(); }); $("#fadeTo").click(function(){ $("#div1").fadeTo("slow",0.4); //opacity:1为完全不透明 }); }); </script> </body> </html> //滑动效果，停止，链式 <!doctype html> <html> <head> <meta charset="utf-8"> <title>index.html</title> <script src="js/jquery-2.1.4.min.js"></script> <style rel="stylesheet"> .menu, .panel{ width: 500px; padding: 5px; margin: 0 auto; text-align: center; background: #e5eecc; border: 1px solid #c3c3c3; } .panel{ height: 120px; display: none; } </style> </head> <body> <p class="menu"> <button class="slideDown">slideDown</button> <button class="slideUp">slideUp</button> <button class="slideToggle">slideToggle</button> <button class="stop">stop</button> <button class="chain">chain</button> </p> <div class="panel"> <p>hello world!</p> <p>how are you?</p> </div> <script> $(document).ready(function(){ $(".slideDown").click(function(){ $(".panel").slideDown("slow"); }); $(".slideUp").click(function(){ $(".panel").slideUp(1000,function(){ alert("The paragraph is now hidden"); }); }); $(".slideToggle").click(function(){ $(".panel").slideToggle(5000); }); $(".stop").click(function(){ $(".panel").stop(); }); $(".chain").click(function(){ $(".panel").css("color","red") .slideDown(2000) .slideUp(2000); }); }); </script> </body> </html> //动画 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>index.html</title> <script src="js/jquery-2.1.4.min.js"></script> </head> <body> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:‘300px‘,opacity:‘0.4‘},"slow"); div.animate({width:‘300px‘,opacity:‘0.8‘},"slow"); div.animate({height:‘100px‘,opacity:‘0.4‘},"slow"); div.animate({width:‘100px‘,opacity:‘0.8‘},"slow"); }); }); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/htmlphp/p/5131608.html
