JQuery可以創建顯示、隱藏、切換、滑動以及自定義動畫等效果。 1.hide()/show() hide()/show()是最基礎也是用的最多的一種效果，它用來控制元素的隱藏與顯示。 下麵是還沒有進行hide()/show()操作的示例： <style> .demo { margin:100px ...
JQuery可以創建顯示、隱藏、切換、滑動以及自定義動畫等效果。
1.hide()/show()
hide()/show()是最基礎也是用的最多的一種效果，它用來控制元素的隱藏與顯示。
下麵是還沒有進行hide()/show()操作的示例：
<style>
.demo {
margin:100px auto;
width:600px; height:320px;
background:#ededed;
border:1px dotted #ff0000;
}
.fl {
width:280px;
height:300px;
float:left;
margin-left:10px;
margin-top:10px;
background:#00cb99;
}
.fr {
width:280px;
height:300px;
float:right;
margin-right:10px;
margin-top:10px;
background:#0093b4;
}
</style>
<div class="demo">
<div class="fl">綠色
</div>
<div class="fr">藍色
</div>
</div>
接下來我們對其進行hide()/show()操作，為綠色div綁定點擊事件，用以控制藍色div的顯示和隱藏：
<script>
$(function(){
$(".fl").click(function(){
var _fr = $(".fr");
if(_fr.is(":visible")){
$(".fr").hide()
}else{
$(".fr").show()
}
})
})
</script>
2.fadeIn()/fadeOut()/fadeToggle()
fade含義為褪去、暗淡，上面的這幾個函數的效果用以實現元素的淡入、淡出、淡入淡出來回切換效果。
<script>
$(function(){
$(".fl").click(function(){
$(".fr").fadeIn(1000);
})
})
</script>
fadeIn的效果實施元素從無到有的一個透明度漸變效果，比較淺顯的視覺效果就是從透明到不透明。
fadeOut（）的效果和fadeIn（）的效果相反，是從不透明到不透明的漸變隱藏。
fadeToggle（）則是兩者的結合，如果元素顯示，應用之後就會隱藏，反之就會顯示。一般配以元素的click事件使用。
3.slideDown()/slideUp()/slideToggle()
其實這幾個函數的效果使用和fade的一樣，區別在於他是滑動的顯示出來，三個函數的效果分別是滑入、畫出、切換顯示。
<script>
$(function(){
$(".fl").click(function(){
$(".fr").slideDown(1000);
})
})
</script>
slide其實是改變元素的高度值，當高度變為0，元素就為display:none；
slideUp（）的效果和slideDown（）的效果相反。
slideToggle（）則是兩者的結合，如果元素顯示，應用之後就會隱藏，繁殖就會顯示。一般配以元素的click事件使用。
