javascript 通用loading动画效果实例代码

　　/*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();

　　});