jQuery 效果- 隱藏和顯示
隱藏、顯示、切換，滑動，淡入淡出，以及動畫!
jQuery hide() 和show()
#透過jQuery，您可以使用hide() 和show() 方法來隱藏和顯示HTML 元素
語法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可選的speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
jQuery toggle()
透過 jQuery，可以使用 toggle() 方法來切換 hide() 和 show() 方法。
顯示被隱藏的元素，並隱藏已顯示的元素。
語法:
$(selector).toggle(speed,callback);
可選的speed 參數規定隱藏/顯示的速度，可以取以下值：" slow"、"fast" 或毫秒。
可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hot").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>淡入淡出
#jQuery Fading 方法
透過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 有以下四種fade 方法：
fadeIn()
fadeOut()
fadeToggle()
#fadeTo()
jQuery fadeIn() 方法
jQuery fadeIn() 用於淡入已隱藏的元素。
語法:
$(selector).fadeIn(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。 .
可選的 callback 參數是 fading 完成後所執行的函式名稱。
jQuery fadeOut() 方法
jQuery fadeOut() 方法用於淡出可見元素。
語法:
$(selector).fadeOut(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函式名稱。
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會在元素中加入淡入效果。
如果元素已淡入，則 fadeToggle() 會在元素中加入淡出效果。
語法:
$(selector).fadeToggle(speed,callback);
可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 fading 完成後所執行的函式名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<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>
</body>
</html>jQuery fadeTo() 方法
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
語法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必要的 opacity 參數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 參數是函數完成後所執行的函數名稱。
滑動
jQuery 滑動方法
透過 jQuery，您可以在元素上建立滑動效果。
jQuery 有以下滑動方法：
slideDown()
slideUp()
slideToggle()
#jQuery slideDown () 方法
jQuery slideDown() 方法用於向下滑動元素。
語法:
$(selector).slideDown(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
jQuery slideUp() 方法
jQuery slideUp() 方法用來向上滑動元素。
語法:
$(selector).slideUp(speed,callback);
可選的 speed 參數規定效果的時間長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。
$(selector).slideToggle(speed,callback);
#可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是滑動完成後所執行的函數名稱。
動畫
jQuery 動畫- animate() 方法
jQuery animate() 方法用於建立自訂動畫。
語法：
$(selector).animate({params},speed,callback);必要的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的長度。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>jQuery 停止動畫
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="http://libs.baidu.com/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>