jQuery菜鳥教程，jquery快速入門（二）

jQuery 效果

1.隱藏，顯示

　1.1顯示 hide() 和隱藏 show()　

　　語法：$(selector).hide(speed,callback);

　　　　　$(selector).show(speed,callback);

jQuery菜鳥教程。?

?

　　例：<p>內容</p>
　　　　<button id="hide">隱藏</button>
　　　　<button id="show">顯示</button>　　　　

　　　　$(document).ready(function(){
　　　　　　$("#hide").click(function(){
　　　　　　　　$("p").hide();
　　　　　　});
　　　　　　$("#show").click(function(){
　　　　　　　　$("p").show();
　　　　　　});
　　　　});

　　可選的 speed 參數規定顯示的速度和隱藏方式，可以取以下值：速度可以取"fast" 或毫秒，隱藏可以選擇"slow"、"linear" 等。

jquery基礎知識，可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。

　　例：<div>隱藏及設置回調函數</div>

　　　　<button class="hidebtn">隱藏</button>

　　　　$(document).ready(function(){
　　　　　　$(".hidebtn").click(function(){
　　　　　　　　$("div").hide(1000,"linear",function(){
　　　　　　　　　　alert("Hide() 方法已完成!");
　　　　　　　　);
　　　　　　});
　　　　});

　1.2 切換 toggle()

jquery的使用步驟？　　語法:?$(selector).toggle(speed,callback);

　　可以使用 toggle() 方法來切換 hide() 和 show() 方法。顯示被隱藏的元素，并隱藏已顯示的元素。

　　例：<button>隱藏/顯示</button>

　　　　<p>內容</p>　　　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").toggle();
　　　　　　});
　　　　});

jquery前端開發實戰教程，　　可選的 speed 參數規定顯示的速度和隱藏方式，可以取以下值：速度可以取"fast" 或毫秒，隱藏可以選擇"slow"、"linear" 等。

可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。　　　　

　　例：<div>隱藏及設置回調函數</div>
　　　　<button class="hidebtn">隱藏或顯示</button>　　

　　　　$(document).ready(function(){
　　　　　　$(".hidebtn").click(function(){
　　　　　　　　$("div").toggle(1000,"linear",function(){
　　　　　　　　　　alert("toggle() 方法已完成!");
　　　　　　　　});
　　　　　　});
　　　　});

2.淡入淡出 (jQuery 擁有下面四種 fade 方法)

jquery常用方法，　2.1?淡入已隱藏的元素fadeIn()? 注意，fadeIn這里的I,是i的大寫，不是L

　　語法:?$(selector).fadeIn(speed,callback);

　　例：<button>點擊淡入 div 元素。</button>

　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>　　　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeIn();
　　　　　　　　$("#div2").fadeIn("slow");
　　　　　　　　$("#div3").fadeIn(3000);
　　　　　　});
　　　　});

jquery怎么使用？　2.2 淡出可見元素fadeOut()

　　語法:$(selector).fadeOut(speed,callback);　

　　例：<button>點擊淡出 div 元素。</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeOut();
　　　　　　　　$("#div2").fadeOut("slow");
　　　　　　　　$("#div3").fadeOut(3000);
　　　　　　});
　　　　});

　2.3 切換淡入、淡出?fadeToggle()?

jquery調用方法？　　語法:$(selector).fadeToggle(speed,callback);　　

　　例：<button>點擊淡入/淡出</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
　　　　<br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
　　　　<br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeToggle();
　　　　　　　　$("#div2").fadeToggle("slow");
　　　　　　　　$("#div3").fadeToggle(3000);
　　　　　　});
　　　　});

　2.4漸變透明度 fadeTo()??（值介于 0 與 1 之間）。

　　語法:$(selector).fadeTo(speed,opacity,callback);　在使用的時候speed參數和opacity是必須要有的　　

　　例：<button>點我讓顏色變淡</button>
　　　　<br><br>
　　　　<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
　　　　<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
　　　　<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#div1").fadeTo("slow",0.15);
　　　　　　　　$("#div2").fadeTo("slow",0.4);
　　　　　　　　$("#div3").fadeTo("slow",0.7);
　　　　　　});
　　　　});

3.滑動

　3.1向下滑動元素 slideDown()?

　　語法:?$(selector).slideDown(speed,callback);

　　例：#panel,#flip{ padding:5px;?text-align:center;?background-color:#e5eecc;?border:solid 1px #c3c3c3;}

　　　　#panel{?padding:50px;?display:none;}

　　　　<div id="flip">點我滑下面板</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideDown("slow");
　　　　　　});
　　　　});

?　3.2 向下滑動元素?slideUp()

　　語法：$(selector).slideUp(speed,callback);

?

　　例：#panel,#flip{ padding:5px;?text-align:center;??border:solid 1px #c3c3c3;}

?

　　　　#panel{?padding:50px; }

　　　　<div id="flip">點我收起面板</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideUp("slow");
　　　　　　});
　　　　});

　3.3 切換向下、向上滑動元素 slideToggle()

　　語法：?$(selector).slideToggle(speed,callback);

　　例：#panel,#flip{ padding:5px;?text-align:center;??border:solid 1px #c3c3c3;}

　　　　#panel{?padding:50px;?display:none;}

　　　　<div id="flip">點擊顯示或隱藏面板。</div>
　　　　<div id="panel">Hello world!</div>

　　　　$(document).ready(function(){
　　　　　　$("#flip").click(function(){
　　　　　　　　$("#panel").slideToggle("slow");

　　　　　　　　//$("#panel").slideToggle(5000);毫秒的寫法不用加引號
　　　　　　});
　　　　});

4.動畫

　4.1 創建自定義動畫?animate()

　　語法：?$(selector).animate({params},speed,callback);?必需帶有 params 參數定義形成動畫的 CSS 屬性，其他參數可選。

　　例：<button>開始動畫</button>
　　　　<p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。
　　　　如果需要改變位置，我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute否則動畫不生效</p>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>　

　　　　$(document).ready(function(){　　　　　　　　　　　　多個屬性：$(document).ready(function(){
　　　　　　$("button").click(function(){　　　　　　　　　　　　　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({left:'250px'}, 5000);　　　　　　　　　　　　　　$("div").animate({
　　　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　left:'250px',
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　opacity:'0.5',

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　?height:'150px',

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　?width:'150px'

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},5000);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　?});

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 });

　　幾乎可以用 animate() 方法來操作所有 CSS 屬性，但是要注意使用駝峰式

　4.2 使用相對值

　　例：<button>開始動畫</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;">?</div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({
　　　　　　　　　　left:'250px',
　　　　　　　　　　height:'+=150px',
　　　　　　　　　　width:'+=150px'
　　　　　　　　},5000);
　　　　　　});
　　　　});

　4.3 使用預定義的值

　　例：<button>開始動畫</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;">?</div>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("div").animate({
　　　　　　　　　　height:'toggle'
　　　　　　　　},5000);
　　　　　　});
　　　　});

　4.4使用隊列功能

　　例：<button>開始動畫</button>
　　　　<div style="background:#98bf21;height:100px;width:100px;position:absolute;">?</div>

　　 例1：

　　　　$(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");
　　　　　　});
　　　　});　

　　例2：

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　var div=$("div");
　　　　　　　　div.animate({left:'100px'},"slow");
　　　　　　　　div.animate({fontSize:'50px'},"slow");
　　　　　　});
　　　　});

5.停止動畫

　　5.1 停止動畫或效果?stop()? 此方法適用于所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

　　語法:?$(selector).stop(stopAll,goToEnd);

?

　　?stopAll 參數規定是否清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。

?goToEnd 參數規定是否立即完成當前動畫。默認是 false。因此默認地，stop() 會清除在被選元素上指定的當前動畫。

　　例：

　　#panel,#flip{ padding:5px;?text-align:center;??border:solid 1px #c3c3c3;}

?

　　#panel{?padding:50px;?display:none;}

　　<button id="stop">停止滑動</button>
　　<div id="flip">點我向下滑動面板</div>
　　<div id="panel">Hello world!</div>

　　例1：(不帶參數，不寫默認是fslse)　　　　　　　　　　　　　　　　　　　　?例2：（帶參數 true）

　　$(document).ready(function(){　　　　　　　　　　　　　$(document).ready(function(){
　　　　$("#flip").click(function(){　　　　　　　　　　　　　　　　$("#flip").click(function(){
　　　　　　$("#panel").slideDown(5000);?　　　　　　　　　　　　　　$("#panel").slideDown(5000);?

　　　　　　$("#panel").slideUp(5000);　　　　　　　　　　　　　　　　$("#panel").slideUp(5000);　　　　　　　　　　　　　　　　　
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　});
　　　　$("#stop").click(function(){　　　　　　　　　　　　　　　　$("#stop").click(function(){
　　　　　　$("#panel").stop();　　　　　　　　　　　　　　　　　　　　$("#panel").stop(true);
　　　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　　});
　　});　　　　　　　　　　　　　　　　　　　　　　　　　　　});

　　停止當前的動畫，但是會繼續后面執行隊列的動畫　　　　　　　　　　停止執行所有的隊列動畫

　　　　　　　　　　　　例3：（帶有?goToEnd 參數）　　　　　　

　　　　　　　　　　　　$(document).ready(function(){　
　　　　　　　　　　　　　　$("#flip").click(function(){　
　　　　　　　　　　　　　　　　$("#panel").slideDown(5000);?　

　　　　　　　　　　　　　　　　$("#panel").slideUp(5000);　
　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　$("#stop").click(function(){
　　　　　　　　　　　　　　　　$("#panel").stop(true,true);
　　　　　　　　　　　　　　});
　　　　　　　　　　　　});

　　　　　　　?停止執行所有的隊列動畫，并且快速完成當前動畫的動作（即，假如有5個隊列動畫，

現在正在執行第3個，點擊之后停止執行所有隊列的動畫，但是會把當前（即第3個隊列）的動畫動作快速的完成）

?

6.?回調函數Callback方法? ?作為動畫animate的第三個參數?Callback 函數是在當前動畫 100% 完成之后執行的。

　　6.1 回調函數在動畫animate中不是必寫的，但在很多時候還是很有必要的。

　　例：（沒有回調函數）

　　　　<button>隱藏</button>
　　　　<p>顯示的內容，點擊后隱藏</p>

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").hide(1000);
　　　　　　　　alert("現在段落被隱藏了");
　　　　　　});
　　　　});

　結果會導致的是在點擊隱藏的時候，動畫還沒有執行就彈出了alert　

　　例：（有回調函數）

　　　　<button>隱藏</button>
　　　　<p>顯示的內容，點擊后隱藏</p>　　

　　　　$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("p").hide("slow",function(){
　　　　　　　　　　alert("段落現在被隱藏了");
　　　　　　　　});
　　　　　　});
　　　　});

　結果是在完全執行玩動畫之后才彈出alert

7.鏈接chaining? (Chaining 允許我們在一條語句中運行多個 jQuery 方法（在相同的元素上）)

　例：<p id="p1">顯示的內容</p>

　　　<button>點我</button>

　　　$(document).ready(function(){
　　　　　$("button").click(function(){
　　　　　　$("#p1").css("color","red").slideUp(2000).slideDown(2000);
　　　　　});
　　　});

　　提示：當進行鏈接時，代碼行會變得很長。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮進。

因為jQuery 會拋掉多余的空格，并當成一行長代碼來執行。　　

　　例：$(document).ready(function(){
　　　　　　$("button").click(function(){
　　　　　　　　$("#p1").css("color","red")
　　　　　　　　.slideUp(2000)
　　　　　　　　.slideDown(2000);
　　　　　　});
　　　　});

?