今天我給大家講一下JavaScript在實現一些動畫時所用的一些方法以及需要註意的地方。

　　顯示與隱藏動畫效果

　　　show()方法:

　　　　　　show()方法會動態地改變當前元素的高度、寬度和不透明度，最終顯示當前元素，此時元素的css屬性display恢復為除了none之外的初始值。

　　　　　　　其語法結構為：jQuery對象.show(duration,[fn]); 其中要註意當參數duration表示動畫效果運行的時間，可以使用關鍵字slow、normal和fast，分別對應時間長度0.6秒、0.4秒和0.2秒，此時參數要加引號；也可以使用數值，單位默認為毫秒，此時參數不需要加引號。

　　　　hide()方法：

　　　　　　　hide()方法會動態改變當前元素的高度、寬度和不透明度，最終隱藏當前元素，此時元素的css屬性display修改為none。

　　　　　　　其語法結構為：jQuery對象.hide(duration,[fn]);

　　　對於顯示和隱藏我給大家舉個例子：

　　給頁面添加一個“顯示”按鈕，當單擊“顯示”按鈕時，將以動畫的方式顯示一幅圖片，動畫完成時執行函數，實現給顯示的圖片加上邊框樣式的功能。再一次單擊按鈕，顯示的圖片以動畫的方式隱藏。

<style type="text/css">
img{
    display:none; 
 
/*圖片默認不顯示*/
} 
</style>
.......
 $(function(){
     $("#btn").click(function(){
         if($(this).val()=="顯示"){
          $("#pic").show("slow",function(){
            $(this).css({"border":"1px solid #ccc","padding":"5px"});  
          } );
          $(this).val("隱藏")
         }else{
            $(
 
"#pic").hide("slow");
            $(this).val("顯示"); 
          }
         });
 });

　 toggle()方法:

　　　toggle()方法除了可以模擬鼠標的連續單擊事件之外，同時還會動態地改變當前元素的高度、寬度和不透明度，最終切換當前元素的可見狀態。即如果元素是可見的，則被切換為隱藏狀態；如果元素是隱藏的，則被切換為可見狀態。

　　　其語法結構為:jQuery對象.toggle(duration,[fn]);

javaScript的一些奇妙動畫