[jQuery]淡出fade-Out,淡入fade-In及Ajax json資料範例

在使用Ajax功能時,一般規劃大都會是清空原本資料區域,顯示Loading畫面,取得資料及處理,然後把Loading移除後顯示回傳的資料,而以下這個範例會再多二個效果,在清空原本資料區域前先做淡出效果,而在取回資料顯示之前,做淡入的效果。

所以效果顯示的順序會是:

jQuery淡入淡山Ajax流程

而在資料傳遞方面則使用格式json,在取回json格式的資料後,依json Array使用for迴圈一個個附加append到資料區域裡。




為了使分頁資訊按鈕顯示在資料區域的右下角,所以在分頁資訊按鈕外層設定css,寬高均為必要元素。

而裡面一層的Div則使用以下css來使其浮動停靠在所設定的位置,寬高及位置元素都是必要的

jQuery效果淡出Fade-Out及淡入Fade-In函數則可參考jQuery網站的說明文件。

範例展示網址:http://blog.yslifes.com/demo/fade-Out-Ajax-In/

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*