一、jQuery小程式之jQuery效果 顯示和隱藏 fading方法 滑動方法 animate()動畫方法 chaining
隱藏和顯示：
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }) }); </script> </head> <body> <!--<div class="div">div</div>--> <p id="p1">如果點選“隱藏”按鈕，我就會消失。</p> <button id="hide" type="button">隱藏</button> <button id="show" type="button">顯示</button> </body>
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button").click(function(){ $("p").hide(1000); }) }) </script> <button type="button">隱藏</button> <p>這是一個段落。</p> <p>這是另一個段落。</p>
toggle()
toggle()方法是hide()和show()的結合體，可以實現隱藏和顯示。
$(selector).toggle(speed,callback);可選的 speed 引數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是 toggle() 方法完成後所執行的函式名稱
jQuery Fading 方法
通過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
fadeIn():淡入已隱藏的元素。
$(selector).fadeIn(speed,callback);可選的 speed 引數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
<body>
<p>演示帶有不同引數的 fadeIn() 方法。</p>
<button>點選這裡，使三個矩形淡入</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>
</body>
fadeOut():方法用於淡出可見元素。
fadeToggle():可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果。
fadeTo():允許漸變為給定的不透明度（值介於 0 與 1 之間）。
$(selector).fadeTo(speed,opacity,callback);fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});jQuery 滑動方法
通過 jQuery，您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法：
- slideDown()
- slideUp()
- slideToggle()
slideDown():用於向下滑動元素。
$("#flip").click(function(){
$("#panel").slideDown();
});slideUp():用於向上滑動元素。
我們需注意的是slideUp()一開始顯示元素。slideDown()一開始不要顯示元素。
slideToggle()：在 slideDown() 與 slideUp() 方法之間進行切換。
動畫：
animate() 方法允許您建立自定義的動畫。
$(selector).animate({params},speed,callback);必需的 params 引數定義形成動畫的 CSS 屬性。
預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
<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(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？
是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫並不包含在核心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 外掛。
animate() - 使用相對值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});animate() - 使用預定義的值
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - 使用佇列功能
jQuery 提供針對動畫的佇列功能。
編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的“內部”佇列。然後逐一執行這些 animate 呼叫。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("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>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>下面的例子把 <div> 元素移動到右邊，然後增加文字的字號：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'100px',opacity:'0.4'},"slow");
$("div").animate({fontSize:'3em'},"slow");
});
});
</script>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>停止動畫:
stop() 方法用於在動畫或效果完成前對它們進行停止。
stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
$(selector).stop(stopAll,goToEnd);可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。
因此，預設地，stop() 會清除在被選元素上指定的當前動畫。
下面的例子演示 stop() 方法，不帶引數：
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
<button id="stop">停止滑動</button>
<div id="flip">點選這裡，向下滑動面板</div>
<div id="panel">Hello world!</div>
Callback 函式:
在當前動畫 100% 完成之後執行。
由於 JavaScript 語句（指令）是逐一執行的 - 按照次序，動畫之後的語句可能會產生錯誤或頁面衝突，因為動畫還沒有完成。
為了避免這個情況，您可以以引數的形式新增 Callback 函式。
當動畫 100% 完成後，即呼叫 Callback 函式。
典型的語法：
$(selector).hide(speed,callback)callback 引數是一個在 hide 操作完成後被執行的函式。
錯誤（沒有 callback）
$("p").hide(1000);
alert("The paragraph is now hidden");
正確（有 callback）
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
如果您希望在一個涉及動畫的函式之後來執行語句，請使用 callback 函式。
Chaining:
通過 jQuery，您可以把動作/方法連結起來。
Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。
下面的例子把 css(), slideUp(), and slideDown() 連結在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);如果需要，我們也可以新增多個方法呼叫。
提示：當進行連結時，程式碼行會變得很差。不過，jQuery 在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮排。
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);