顯示與隱藏
在JS動畫中际歼，show()與hide()是我們會經(jīng)常用到的顯示與隱藏方法。
$("#hide").click(function(){
$("p").hide();//隱藏代碼
});
$("#show").click(function(){
$("p").show();//顯示代碼
});
通過 jQuery，您可以使用 toggle() 方法來快捷切換 hide() 和 show() 方法。
顯示被隱藏的元素，并隱藏已顯示的元素：
$("button").click(function(){
$("p").toggle();//每次單擊按鈕 顯示以及隱藏
});
淡入與淡出
fadeIn() 與fadeout()的用法
$("btn").fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
可選的 speed 參數(shù)規(guī)定效果的時長瓮钥。它可以取以下值："slow"、"fast" 或毫秒烹吵。
可選的 callback 參數(shù)是 fading 完成后所執(zhí)行的函數(shù)名稱碉熄。
下面的例子演示了帶有不同參數(shù)的 fadeIn()和fadeOut() 方法
$("button").click(function(){//淡入方法
$("#div1").fadeIn();
$("#div2").fadeIn("slow");//延遲600毫秒
$("#div3").fadeIn(3000);
});
$("button").click(function(){//淡出方法
$("#div1").fadeOut();
$("#div2").fadeOut("fast");//延遲200毫秒
$("#div3").fadeOut(3000);
});
可以運用 fadeToggle()方法快捷進行切換
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
在淡入淡出中有這一個淡化透明度方法fadeTo()
通過透明度的轉(zhuǎn)變進而展現(xiàn)出顏色的改變
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){//改變透明度
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
body代碼塊
<p>實例方法</p>
<button>點擊改變</button>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
總結(jié)一下，在這些方法中,可以在后面添加函數(shù)肋拔，從而達到一些需要的滿足锈津，比如按鈕的文本內(nèi)容的更換，顏色背景的更換等凉蜂，從而達到一些動態(tài)的效果琼梆，fadeIn添加函數(shù)的方法，在高版本中的jquery中做為事件使用的toggle(func1窿吩，func2);方法已經(jīng)被棄用茎杂。只保留交替顯示/隱藏的toggle()方法。toggle()相比于show()和hide()更加便捷纫雁，代碼更加簡潔煌往，更加有效率，在各種動態(tài)效果中有著許多與toggle()相似的方法,在學(xué)習(xí)與工作中轧邪，可以方便學(xué)習(xí)以及使用刽脖。
