jQuery學習筆記-2-效果
效果
本章主要記錄jQuery效果，這些內容來自學習的網上的一些資料。
隱藏、顯示、切換，滑動，淡入淡出，以及動畫
一.隱藏/顯示：
一個hide()例項。演示如何隱藏文字。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>Google</h3> <div class="ex"> <button class="hide">點我隱藏</button> <p>站點名: Google<br> 站點 URL：http://www.google.com</p> </div> <h3>我的主頁</h3> <div class="ex"> <button class="hide">點我隱藏</button> <p>站點名: 我的主頁<br> 站點 URL：https://blog.csdn.net/qq_39492374</p> </div> </body> </html>
1.jQuery hide() 和 show()
通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>如果你點選“隱藏” 按鈕，我將會消失。</p> <button id="hide">隱藏</button> <button id="show">顯示</button> </body> </html>
語法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。
下面的例子演示了帶有 speed 引數的 hide() 方法：
$("button").click(function(){
$("p").hide(1000); });
例項
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head> <body> <button>隱藏</button> <p>這是個段落，內容比較少。</p> <p>這是另外一個小段落</p> </body> </html>
下面的例子演示了帶有 speed 引數的 hide() 方法，並使用回撥函式隱藏按鈕s：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
$("button").hide("slow");
});
});
});
</script>
</head>
<body>
<div>隱藏及設定回撥函式</div>
<button class="hidebtn">隱藏</button>
</body>
</html>
2.jQuery toggle()
通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
切換隱藏/顯示
顯示被隱藏的元素，並隱藏已顯示的元素：
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
<button>隱藏/顯示</button>
<p>這是一個文字段落</p>
<p>這是另一個文字段落</p>
語法:
$(selector).toggle(speed,callback);
可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。
二.淡入淡出
1.jQuery Fading 方法
通過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
2.jQuery fadeIn() 方法
jQuery fadeIn() 用於淡入已隱藏的元素。
語法:
$(selector).fadeIn(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。.
可選的 callback 引數是 fading 完成後所執行的函式名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了 fadeIn() 使用了不同引數的效果。</p>
<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>
</body>
</html>
3.jQuery fadeOut() 方法
jQuery fadeOut() 方法用於淡出可見元素。
語法:
$(selector).fadeOut(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。
例項
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
4.jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果。
語法:
$(selector).fadeToggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。
例項
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
5.jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
語法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 引數是該函式完成後所執行的函式名稱。
例項
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
三.滑動
通過 jQuery，您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法：
- slideDown()
- slideUp()
- slideToggle()
1.jQuery slideDown() 方法
jQuery slideDown() 方法用於向下滑動元素。
語法:
$(selector).slideDown(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。
下面的例子演示了 slideDown() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</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>
</head>
<body>
<div id="flip">點我滑下面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
2.jQuery slideUp() 方法
jQuery slideUp() 方法用於向上滑動元素。
語法:
$(selector).slideUp(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。
下面的例子演示了 slideUp() 方法：
例項
$("#flip").click(function(){
$("#panel").slideUp();
});
3.jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。
下面的例子演示了 slideToggle() 方法：
例項
$("#flip").click(function(){
$("#panel").slideToggle();
});
四.動畫
1.jQuery 動畫 - animate() 方法
jQuery animate() 方法用於建立自定義動畫。
語法：
$(selector).animate({params},speed,callback);
必需的 params 引數定義形成動畫的 CSS 屬性。
可選的 speed 引數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
可選的 callback 引數是動畫完成後所執行的函式名稱。
下面的例子演示 animate() 方法的簡單應用。它把
元素往右邊移動了 250 畫素：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>預設情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。
如果需要改變為，我們需要將元素的 position 屬性設定為 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
2.jQuery animate() - 操作多個屬性
請注意，生成動畫的過程中可同時使用多個屬性：
例項
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5', //透明度
height:'150px',
width:'150px'
});
});
3.jQuery animate() - 使用相對值
也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：
例項
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
4.jQuery animate() - 使用預定義的值
您甚至可以把屬性的動畫值設定為 “show”、“hide” 或 “toggle”：
例項
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
5.jQuery animate() - 使用佇列功能
預設地，jQuery 提供針對動畫的佇列功能。
這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。
$("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");
});
下面的例子把
元素先往右邊移動了 100 畫素，然後增加文字的字號：$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
五.停止效果
1.jQuery stop() 方法
jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
語法:
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。
因此，預設地，stop() 會清除在被選元素上指定的當前動畫。
下面的例子演示 stop() 方法，不帶引數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<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>
</head>
<body>
<button id="stop">停止滑動</button>
<div id="flip">點我向下滑動面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
六.Callback方法
1.jQuery 動畫的問題
許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。
例子：
$(“p”).hide(“slow”)
speed 或 duration 引數可以設定許多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。
例項
以下例項在隱藏效果完全實現後回撥函式:
使用 callback 例項
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落現在被隱藏了");
});
});
以下例項沒有回撥函式，警告框會在隱藏效果完成前彈出：
沒有 callback(回撥)
$("button").click(function(){
$("p").hide(1000);
alert("段落現在被隱藏了");
});
七.鏈(Chaining)
通過 jQuery，可以把動作/方法連結在一起。
Chaining 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）。
1.jQuery 方法連結
直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。
不過，有一種名為連結（chaining）的技術，允許我們在相同的元素上執行多條 jQuery 命令，一條接著另一條。
提示： 這樣的話，瀏覽器就不必多次查詢相同的元素。
如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
下面的例子把 css()、slideUp() 和 slideDown() 連結在一起。“p1” 元素首先會變為紅色，然後向上滑動，再然後向下滑動：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$("button").click(function(){
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">菜鳥教程!!</p>
<button>點我</button>
</body>
</html>
如果需要，我們也可以新增多個方法呼叫。
提示：當進行連結時，程式碼行會變得很長。不過，jQuery 語法不是很嚴格；您可以按照希望的格式來寫，包含換行和縮排。
如下書寫也可以很好地執行：
例項
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 會拋掉多餘的空格，並當成一行長程式碼來執行上面的程式碼行。
208.10.26-2018.10.29