jQuery效果 隱藏、顯示、切換、滑動、淡入淡出、以及動畫 1、隱藏與顯示(改變：display：none;) hide()——隱藏 show()——顯示 toggle()方法：可以使用它來切換hide()與show()方法 eg1：顯示 <style type="text/css"> *{margin:0;padding:0;} .body{font-size:12px;font-family:"微軟雅黑";color:#666;} .yym{width:100px;height:100px;background:red;text-align:center;line-height:100px;border-radius:50px;color:#fff;display:none;} </style> </head> <body> <div class="yym">世界那么大</div> <input type="button" value="點擊顯示HTML元素" id="show_btn" /> <input type="button" value="點擊顯示HTML元素並執行回調函數" id="show_btn1" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //點擊按鈕讓class=yym的文本顯示出來 $("#show_btn").click(function(){ //slow默認值==600毫秒，1秒=1000毫秒;fast==200毫秒 $(".yym").show("slow"); }); //用1000毫秒把.yym顯示出來，並且將文本替換成新的內容 $("#show_btn1").click(function(){ $(".yym").show(1000,function(){ $(this).text("我想去看看"); }); }); }); </script> eg2：隱藏 <body> <p>黃河是中國的第二大河流</p> <input type="button" value="點擊隱藏文本" id="yym_hide"/> <input type="button" value="點擊緩慢隱藏文本" id="yym_hide1" /> <input type="button" value="緩慢隱藏文本並回調函數" id="yym_hide2" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //點擊按鈕隱藏P標簽 $("#yym_hide").click(function(){ $("p").hide(); }); //點擊按鈕緩慢隱藏P標簽 $("#yym_hide1").click(function(){ $("p").hide(2000); }); //點擊元素 $("#yym_hide2").click(function(){ //隱藏p標簽，function（回調函數） $("p").hide(1000,function(){ $("body").text("黃河之母親河");//文本隱藏后，若要讓文本改變，則用body }); }); }); </script> eg3：toggle()——點擊按鈕隱藏，再點擊又顯示 <style type="text/css"> *{margin:0;padding:0;} .yym{width:300px;height:300px;background:green;} </style> </head> <body> <div class="yym"></div> <input type="button" value="toggle函數" id="yym_toggle" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //點擊按鈕隱藏，再點擊又顯示 $("#yym_toggle").click(function(){ }); }); </script> eg3.1: <style type="text/css"> *{margin:0;padding:0;} .yym{width:300px;height:300px;background:green;} </style> </head> <body> <div class="yym"></div> <input type="button" value="toggle函數" id="yym_toggle" /> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //點擊按鈕隱藏，再點擊又顯示 $("#yym_toggle").click(function(){ $(".yym").toggle(2000,function(){ $("body").html("<img src='http://p1.qhimg.com/dmt/528_351_/t012ffcdd03db3d42f6.jpg' alt='美女' width='500' height='300'>") }); }); }); </script> 2、淡入淡出(改變：寬度、高度、透明度<opacity>) 通過jQuery，可以實現元素的淡入淡出效果(改變opacity透明度) jQuery擁有以下四種方法： fadeIn()用於淡入已隱藏的元素 fadeOut()方法用於淡出可見元素 fadeToggle()該方法可以在fadeInt()與fadeOut()方法之間進行切換 如果元素已淡出，則fadeToggle()會向元素添加淡入效果 如果元素已淡入，則fadeToggle()會向元素添加淡出效果 jQuery fadeTo()方法 jQuery fadeTo()方法允許漸變為給定的不透明（值介於0與1之間） eg:fadeIn()淡入元素 fadeOut淡出元素 fadeToggle()切換 fadeTo透明度 <style type="text/css"> *{margin:0;padding:0;} .yym{width:300px;height:300px;background:red;display:none;} </style> </head> <body> <input type="button" value="我是一個fadeIn方法" id="yym_fadeIn"> <input type="button" value="我是一個fadeOut方法" id="yym_fadeOut"> <input type="button" value="fadeToggle方法" id="yym_fadeToggle" /> <input type="button" value="fadeTo透明度" id="yym_fadeTo" /> <div class="yym"></div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //fadeIn淡入 $("#yym_fadeIn").click(function(){ $(".yym").fadeIn(2000); }); //fadeOut淡出 $("#yym_fadeOut").click(function(){ $(".yym").fadeOut(2000); }); //fadeToggle 隱藏與顯示的切換 $("#yym_fadeToggle").click(function(){ $(".yym").fadeToggle(); }); //fadeTo漸變為給定的不透明度（值介於0到1之間） $("#yym_fadeTo").click(function(){ $(".yym").fadeTo(2000,0.5,function(){//表示2秒鍾變成半透明度，所有例子中function都是可加可不加，加是另外改變什么 alert("太帥了"); }); }); }); </script> </body> 3、滑動(改變：高度) jQuery滑動方法可使元素上下滑動（主要是改變高度） 通過jQuery，可以在元素上創建滑動效果 jQuery有以下滑動方法： slideDown()用於向下滑動元素 slideUp()用於向上滑動元素 slideToggle()方法可以在slideDown()和slideUp方法之間進行切換 如果元素向下滑動，則slideToggle()可向上滑動 如果元素向上滑動，則slideToggle()可向下滑動 eg： <style type="text/css"> *{margin:0;padding:0;} .yym{width:300px;height:300px;background:red;display:none} </style> </head> <body> <input type="button" value="向下滑動" id="yym_slideDown" /> <input type="button" value="向上滑動" id="yym_slideUp" /> <input type="button" value="上下滑動切換" id="yym_slideToggle" /> <div class="yym"></div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //slideDown向下滑動 $("#yym_slideDown").click(function(){ $(".yym").slideDown(2000); }); //slideUp向上滑動 $("#yym_slideUp").click(function(){ $(".yym").slideUp(4000); }); //slideToggle上下滑動切換 $("#yym_slideToggle").click(function(){ $(".yym").slideToggle(2000); }); }); </script> 4、 1）動畫 jQuery animate()方法允許創建自定義的動畫 jQuery動畫——animate()方法 jQuery animate()方法用於創建自定義動畫 2）停止動畫 jQuery stop()方法用於在動畫或效果完成前對他們進行停止 jQuery stop()方法 jQuery stop()方法用於停止動畫或效果，在他們完成之前 stop()方法適用於所有jQuery效果函數，淡入淡出和自定義動畫 eg： <style type="text/css"> *{margin:0;padding:0;} .yym{width:300px;height:300px;background:red;position:absolute;left:0;top:30px;} </style> </head> <body> <input type="button" value="點擊我放大" id="yym_animate" /> <input type="button" value="點擊我停止" id="yym_stop" /> <div class="yym"></div> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ //使原背景圖片動起來 $("#yym_animate").click(function(){ $(".yym").animate({ width:"500px", height:"500px", //移動時必須要position定位 left:"200px",//向右移動 top:"200px"//向下移動 },2000,function(){//不寫時間也可以的 alert(0); }); }); //使原本動起來的背景圖片停下來 $("#yym_stop").click(function(){ $(".yym").stop(); }); }); </script> </body>