1、jQuery slideToggle() 表示簡單的 slide panel 效果。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:70px;
display:none;
}
</style>
</head>
<body>
<p class="flip">請點擊這里</p>
<br/>
<br/>
<div class="panel" style="width:200px">
<p>JQuery</p>
<p>愛，別太認真</p>
</div>
2、jQuery fadeTo()表示簡單的淡出效果。
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
});
</script>
</head>
<body>
<div id="test" style="background:yellow;width:300px;height:300px">
<button type="button">點擊這里查看淡出效果</button>
</div>
</body>
</html>
3、jQuery animate() 動畫效果
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:500},"slow");
$("#box").animate({width:500},"slow");
$("#box").animate({height:150},"slow");
$("#box").animate({width:150},"slow");
});
});
</script>
</head>
<body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"
style="background:red;height:150px;width:150px;position:relative">
</div>
</body>
</html>
4、顯示/隱藏切換效果 $("p").toggle();
html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">顯示/隱藏切換效果</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
5、jQuery 效果
| 函數 | 描述 |
|---|---|
| $(selector).hide() | 隱藏被選元素 |
| $(selector).show() | 顯示被選元素 |
| $(selector).toggle() | 切換（在隱藏與顯示之間）被選元素 |
| $(selector).slideDown() | 向下滑動（顯示）被選元素 |
| $(selector).slideUp() | 向上滑動（隱藏）被選元素 |
| $(selector).slideToggle() | 對被選元素切換向上滑動和向下滑動 |
| $(selector).fadeIn() | 淡入被選元素 |
| $(selector).fadeOut() | 淡出被選元素 |
| $(selector).fadeTo() | 把被選元素淡出為給定的不透明度 |
| $(selector).animate() | 對被選元素執行自定義動畫 |