jQuery封装的页面数据加载动画效果

1、CSS样式：

@CHARSET "UTF-8";

* html .showbox,* html .overlay {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop) );
}

#AjaxLoading {
	border: 1px solid #8CBEDA;
	color: #37a;
	font-size: 12px;
	font-weight: bold;
}

#AjaxLoading div.loadingWord {
	width: 180px;
	height: 50px;
	line-height: 50px;
	border: 2px solid #D6E7F2;
	background: #fff;
}

#AjaxLoading img {
	margin: 10px 15px;
	float: left;
	display: inline;
}

.overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100%;
	height: 100%;
	_padding: 0 20px 0 0;
	background: #f6f4f5;
	display: none;
}

.showbox {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 9999;
	opacity: 0;
	filter: alpha(opacity =     0);
	margin-left: -80px;
}

2、JS：

/**
 * 加载动画窗口
 * 
 * @author dendy
 * @since 2013-7-19 10:13:05
 */
 function getLoadingHtml(msg) {
 	if(!msg) msg = "加载";
 	var html = "<div id='loadingDiv'>"
	+ 	"<div style='height: 1325px; display: none; opacity: 0;' class='overlay'></div>"
	+ 		"<div style='opacity: 0; margin-top: 250px;' id='AjaxLoading' class='showbox'>"
	+			"<div class='loadingWord'>"
	+				"<img src='" + Util.getContentPath() +"/images/ajax-loader.gif'>" + msg + "中，请稍候..."
	+			"</div>"
	+ 		"</div>"
	+ 	"<div style='height: 1200px;'></div>"
	+ "</div>";
	return html;
 }

function ajaxLoadingInit(msg) {
	var loadingDiv = getLoadingHtml(msg);
	var h = $(document).height();
	$(".overlay").css({"height": h});	
	var div = $("body").find("#loadingDiv");
	div.remove();
	$("body").append($(loadingDiv));
}

/**
 * 开始显示loading，在ajax执行之前调用
 * @param msg 操作消息，"加载", "保存", "删除"
 */
function startLoading(msg) {
	ajaxLoadingInit(msg);
	$(".overlay").css({'display':'block','opacity':'0.8'});
	$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
}

/**
 * 加载完成后隐藏，在ajax执行完成后（complete）调用
 */
function endLoading() {
	$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
	$(".overlay").css({'display':'none','opacity':'0'});
}

3、调用例子：

        startLoading();
	$.ajax({
		type : "POST",
		url : this.url,
		dataType : "json",
		data : this.args,
		success : function (data) {
		
		},
		complete : function () {
			if (self.showLoading == true) endLoading();
		},
		error : this.error
	});