jquery animate는 마우스를 배치할 때 표시, 떠나기 및 숨기기 효과를 구현합니다.

1、CSS样式：

复代码 代码如下:

@CHARSET "UTF-8" ;
* html .showbox,* html .overlay {
위치: 절대;
top: 표현식(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
테두리: 1px 솔리드 #8CBEDA;
색상: #37a;
글꼴 크기: 12px;
글꼴 두께: 굵게;
}
#AjaxLoading div.loadingWord {
너비: 180px;
높이: 50px;
줄 높이: 50px;
테두리: 2px 단색 #D6E7F2;
배경: #fff;
}
#AjaxLoading img {
여백: 10px 15px;
플로트: 왼쪽;
디스플레이: 인라인;
}
.overlay {
위치: 고정;
상단: 0;
오른쪽: 0;
하단: 0;
왼쪽: 0;
z-색인: 998;
너비: 100%;
높이: 100%;
_padding: 0 20px 0 0;
배경: #f6f4f5;
디스플레이: 없음;
}
.showbox {
위치: 고정;
상단: 0;
왼쪽: 50%;
z-색인: 9999;
불투명도: 0;
필터: 알파(불투명도 = 0);
왼쪽 여백: -80px;
}

2、JS：

复代码 代码如下:

/**
* 애니메이션 로드 창
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg ​​= "加载";
var html = "

"
"

"
"

"
"

"
"" msg "中，请稍候..."
"

"
"

"
"

"
"

";
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));
}
/**
* ajax 실행 전에 호출되는 로딩 표시 시작
* @param msg 작업 메시지, "load", "save", "delete"
*/
function startLoading(msg) {
ajaxLoadingInit(msg);
$(".overlay").css({'display':'block','opacity':'0.8'});
$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
}
/**
* 로딩 완료 후 숨기기, Ajax 실행 완료 후 호출(완료)
*/
function endLoading() {
$(".showbox").stop(true).animate({'margin-top':'250px ','불투명도':'0'},400);
$(".overlay").css({'display':'none','opacity':'0'});
}

3.

startLoading(); $.ajax({ 유형 : "POST", url : this.url, dataType : "json", data : this.args, 성공 : 함수 (data) {

},
complete : function () {
if (self.showLoading == true) endLoading()
},
error : this.error
});