基於jQuery實作最基本的淡入淡出效果實例_jquery

本文實例講述了基於jQuery實現最基本的淡入淡出效果的方法。分享給大家供大家參考。具體分析如下：

jQuery是一個JavaScript 函式庫，也就是JavaScript的擴展，用來滿足各種日益增加的不同特效需求。其實質就是JavaScript

下面來寫一個最基本的JQ程式來說明JQ。

一、基本目標

網頁中有以下三個按鈕，一個只能隱藏文本，一個只能顯示文本，一個同時能隱藏與顯示文本，點擊一下顯示，再點擊一下隱藏，無限循環。如下圖：

二、製作過程

1.首先你要到JQ官網下載一個JQ支援檔放入你的網站資料夾。這個支援檔案是jQuery1.11（點擊開啟連結），可以到jQuery官網中下載相容舊瀏覽器IE6的jQuery1.11（點擊開啟連結），而不是不相容舊瀏覽器IE6的jQuery2。

2.整個網頁程式碼如下，再分片段進行說明：

複製程式碼 程式碼如下:

 
 
     
         
         
         
            $(文檔).ready(function() { 
                $("#hide").click(function() { 
                    $("#text").hide(); 
                }); 
                $("#show").click(function() { 
                    $("#text").show(); 
                }); 
                $("#toggle").click(function() { 
                    $("#text").toggle(); 
                }); 
            }); 
        > 腳本
         
 
 
         
         
    頭> 
     
        
   

 
        被折騰的文字
   

 
     
     
        隱藏
    按鈕> 
     
        顯示
    按鈕> 
     
        隱藏/顯示
    按鈕>  
    正文> 

（1）

部分
部分是實作核心程式碼部分，位於後面上方，先說部分

複製程式碼程式碼如下：

 
    

 
    被折騰的文字 

 
    
    
 
    隱藏 
 
 
    顯示 
 
 
    隱藏/顯示 
  
 

（2）

部分

複製程式碼 程式碼如下:

 
    
     
     
    <script>  <br />     <!--JQ的程式碼寫首先要用$(document).ready(function() {});去定義一個總函數，缺少這個函數所提供的框架之後的東西無法執行-->  <br />         $(document).ready(function() {  <br />             <!--之後在此函數內寫出所需的函數-->  <br />             <!--對於ID為hide這個按鈕的click動作進行函數的調用，之後的動作依舊放在這個一個函數的里面-->  <br />             $("#hide").click(function() {  <br />                 <!--隱藏ID的為text的文字-->  <br />                 $("#text").hide();  <br />             });  <br />             $("#show").click(function() {  <br />                 <!--顯示ID的為text的文字-->  <br />                 $("#text").show();  <br />             });  <br />             $("#toggle").click(function() {  <br />                 <!--在隱藏與顯示之間切換ID的為text的文字-->  <br />                 $("#text").toggle();  <br />             });  <br />         });  <br />     </script>