1.jquery效果函數:hide()隱藏，show()顯示，toggle()切換，fadeIn()淡入，fadeOut()淡出，fadeToggle()實現淡入淡出的切換，fadeTo()允許漸變給定的不透明度，slideDown()向下滑動，slideUp()向上滑動，slideToggle()用於上下滑動之間的切換，animate()創建自定義動畫，stop()用於在動畫效果完成前對他們進行停止.
2.各個函數的語法：
隱藏顯示：$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>$(this).hide()函數</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("button").click(function(){
$(this).hide(1000,function(){
alert("meimei");
});
});
});
</script>
</head>
<body>
<button type="button" value="liliaaa">測試</button>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hide(),show切換</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#hide").click(function(){
$("#pid").hide();
});
$("#show").click(function(){
$("#pid").show();
});
$("#change").click(function(){
$("#pid").toggle();
});
});
</script>
</head>
<body>
<p id="pid">這是一個段落，如果點擊隱藏按鈕，我就會消失</p>
<button type="button" id="hide">隱藏</button>
<button type="button" id="show">顯示</button>
<button type="button" id="change">切換</button>
</body>
</html>
淡入淡出：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.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>點擊這裏，使三個矩形淡入</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>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數的 fadeOut() 方法。</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>
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示帶有不同參數的 fadeToggle() 方法。</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>
</body>
</html>
滑動效果：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑動效果</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".filip").click(function(){
$(".panel").slideUp("slow");
});
$(".filip2").click(function(){
// alert(1111);
$(".panel2").slideDown("fast");
});
$(".filip3").click(function(){
$(".panel3").slideToggle("slow");
});
});
</script>
<style type="text/css">
.panel , .filip,.panel2,.filip2,.panel3,.filip3{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px red;
}
div.panel,.panel2,.panel3{
height:120px;
}
.panel2{
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>這是一個測試aaaaaaa</p>
<p>這還是一個測試噢噢噢噢噢噢噢噢</p>
</div>
<p class="filip">點擊我</p>
<br/><br/><br/><br/>
<p class="filip2">點擊我</p>
<div class="panel2">
<p>阿斯發出vdvadv的v地方</p>
<p>sbv說的v說vbfd電飯煲飯煲</p>
</div>
<br/><br/><br/>
<div class="panel3">
<p>fvasfvsdkvmsdlvmvfs</p>
<p>acccccccccccd</p>
</div>
<p class="filip3">點擊我</p>
</body>
</html>
動畫效果：
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置爲 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
停止函數：
$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當前動畫。
<html>
<head>
<script src="/jquery/jquery-1.11.1.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>