1、隱藏&顯示

設定元素的隱藏，顯示功能，語法如下：
jquery show(speed ，callback);
jquery hide(speed ，callback);
jquery togger(speed ，callback);

說明：引數不是必須的，在有需要的時候新增即可。

應用示例：

$("button").click(function(){
   $('p').hide();//設定p元素隱藏
   $('p').show();//設定p元素顯示
   $('p').togger();//切換顯示
})

如果需要設定動畫時間和回撥函式，可以在函式中傳遞引數進去。

$('button').click(funciton(){
   $('p').hide(1000 , funciton(){
       alert('發生隱藏動作的時間為1s');
   })
})
//或者把回撥函式單獨寫成一個函式，在回撥函式的位置呼叫該函式
$('button').click(funciton(){
   $('p').hide(1000 , callback());
});
function callback(){
    alert('發生隱藏動作的時間為1s')
}

2、淡入&淡出

使元素的切換方式為淡入，淡出。主要有以下四種切換方式：
jquery.fadeIn(speed , callback);
jquery.fadeOut(speed , callback);
jquery.fadeTo(speed , opacity , callback );
jquery.fadeTogger(speend , callback);

使用示例：

$('button').click({
    $('p').fadeIn();//直接淡入；
    $('p').fadeIn('slow');//緩慢淡入；
    $('p').fadeIn(5000);//自定義時間淡入；
})
//fadeOut ， fadeTogger 的使用方法相同，fadeTo是指自定義一個淡出的透明度，而不是直接淡出為0
$('button').click(function(){
   $('p').fadeTo('slow' , 0.75);
   $('p').fadeTo(1000 , 0.15);
})

特別說明：回撥函式的使用方式和hide()相同 ， 可以直接在函式中實現，也可以定義後在回撥函式中呼叫。

3、滑動

使元素以從下向上滑動的效果來出現，消失。主要有以下三種語法：
jquery.slideDown(speed , callback);
jquery.slideUp(speed , callback);
jquery.slideTogger(speed , callback);

使用示例

   $('button').click(function(){
      $('p').slideDown(1000);
      $('p').slideUp(1000);
   })
   $('button2').click(function(){
      $('p').slideTogger(1000);
   })

4、動畫

用於建立自定義的動畫屬性，語法
$(dom).animate({param} , speed , callback);
其中：param是一組物件，是animate函式必須的引數，它定義了形成動畫的css屬性；
使用示例：

    $('button').click(funciton(){
        $('p').animate({left:200px},2000);
    })

特別說明：預設的情況下一個元素都有一個靜態的屬性，且無法移動，如果在使用animate設定left、right等位置相關的屬性的時候，需把該元素的position設定為relative ， absolute ，fixed 等；

在animate中設定多個屬性值時需要注意：屬性的命名必須是camel（駝峰命名法）

使用示例：

   $('button').click(funciton(){
        $('p').animate({
            left:200px,
            paddingTop:20px,
            fontSize:12px;
         },2000);
     })

如果需要設定元素產生動畫的位置相對於原來的位置，則會使用到動畫中的相對值

  $('button').click(funciton(){
        $('p').animate({
            left:"+=200px",
            height:"+=150px";
            width:"+=200px"
         },2000);
     })

如果針對一個元素需要使用多個動畫效果，預設的，jquery提供了一個佇列的功能，jquery會逐一呼叫每一個animate方法。使用方法如下：

    $('button').click(function(){
        var dom = $('.dome');
        dom.animate({letf:'200px' , fontSize:'20px'});
        dom.animate({top:'200px',fontSize:'30px'});
        .....
    })