項目中多處要給ajax提交的時候增加等待動畫效果,所以就寫了一個簡單的通用js方法,大家參考使用吧
代碼如下: /*ajax提交的延時等待效果*/ var AjaxLoding = new Object(); //wraperid : 顯示loding圖片的容器元素 //ms:表示loding圖標顯示的時長,毫秒 //envent:表示出發事件的事件源對象,用於獲得出發事件的對象 //callback:表示動畫結束後執行的回掉方法 //stop()方法表示在回掉方法執行成功後執行的隱藏動畫的操作 AjaxLoding.load = function(lodingid,ms,event,left,top,callback){ if (!left || typeof left == undefined) left = 0; if (!top || typeof top == undefined) top = 0; this.lodingid = lodingid; //顯示loding圖標的parent元素 this.obj = $("#" + this.lodingid); this.sourceEventElement=$(event.currentTarget); this.start = function () { this.obj.css({positin:"relative"}); this.sourceEventElement.attr("disabled",true); //默認將圖標居中與lodingid顯示,設置如下樣式 var imgobj = $("<img src='/images/loaderc.gif' style='position:absolute; width:32px; height:32px;' id='img_loding'/>"); imgobj.css({ left: this.obj.width() / 2-imgobj.width()/2-left, top: this.obj.height() / 2-imgobj.height()/2-top }); imgobj.appendTo(this.obj); this.obj.animate({height:this.obj.height()}, ms, function () { callback(); }); }; this.stop = function () { $("#img_loding").remove(); this.sourceEventElement.attr("disabled", false); } }; 調用方法: 代碼如下: $("#elementid").click(function (e) { var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () { //alert("提交成功!"); obj.stop();//隱藏加載圖標 }); obj.start(); });