jQuery效果：隱藏、顯示、切換、滑動、淡入淡出、動畫

標籤：微軟雅黑   通過   四種   hid   背景圖   自訂動畫   內容   int   center   

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>

 

jQuery效果：隱藏、顯示、切換、滑動、淡入淡出、動畫