效果

基本

hide 隱藏顯示的元素

'hide( speed, [callback] )' 的無動畫版

隱藏所有段落

$("p").hide()

用600毫秒(慢) / 200毫秒(快) 的時間將段落緩慢的隱藏

$("p").hide("slow / fast");  

用將段落迅速隱藏，之後彈出一個對話方塊。

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

show 顯示隱藏

如果選擇的元素是可見的，這個方法將不會改變任何東西。無論這個元素是通過hide()方法隱藏的還是在CSS裡設定了display:none;，這個方法都將有效。

1.顯示所有段落

<p style="display: none">Hello</p>
$("p").show()

2.用緩慢 / 迅速 的動畫將隱藏的段落顯示出來，歷時600毫秒。

$("p").show("slow / fast");

3.用迅速的動畫將隱藏的段落用將近4秒顯示出來。並在之後執行反饋！

$("p").show(4000,function(){
   $(this).text("反饋");
 });
 

toggle

如果元素是可見的，切換為隱藏的；如果元素是隱藏的，切換為可見的。

$('button').on('click', function
 
 () {
    $('div').hide()//隱藏
    $('div').toggle()//預設有,點後沒,再點又有
}

switch引數描述:

如果這個引數為true ，那麼匹配的元素將顯示;如果false ，元素是隱藏的

$('#foo').toggle(showOrHide);
//相當於
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}      
 

滑動

slideDown 展開 / slideUp 收回

通過調整高度實現展開效果

以滑動方式顯示隱藏的 <p> 元素：

$(".btn2").click(function
 
(){
  $("p").slideDown();
});
​
$("p").slideDown("slow / fast");
​
$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

slideToggle 展收可切換

$('button').on('click',function () {
    $('div').fadeToggle()
})
 

fadeIn 淡入 fadeOut 淡出

$("p").fadeIn/fadeOut ("slow");
("p").fadeIn/fadeOut ("fast/slow"/3000,function(){
   alert("Animation Done.");
 });

fadeTo 漸進

fadeToggle 入出可切換