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

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

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

jQuery淡入淡山Ajax流程

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




//可以透過.length得知其中的物件數
var NumOfJData = Jdata.length; 
//把取得的json加上html tag顯示於容器裡
for (var i = 0; i < NumOfJData; i++) {
  jQuery("#ajax").append("<div class=\"ajaxRoll\"><img src=\"images/icon/"+
          Jdata[i]["id"]+".jpg\" /><div class=\"title\">"+Jdata[i]["title"]+
          "</div><div class=\"desc\">"+Jdata[i]["title"]+"</div></div>");
}

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

.ajaxagent {
    width: 616px;
    height: 550px;
    position: relative;
    
}

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

.ajaxagent ul.playerControl {
	position: absolute;
	bottom: 5px;
	height: 20px;
	right: 5px;
}

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

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

發表迴響