本文實例講述了基於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();
});
});
> 腳本
JQ淡出與顯示
頭>
被折騰的文字
隱藏
按鈕>
顯示
按鈕>
隱藏/顯示
按鈕>
正文>
（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>
