jquery animate實作滑鼠放上去顯示離開隱藏效果_jquery

1.CSS樣式：

複製程式碼程式碼如下：

@CHARSET "UTF-8" ;
* html .showbox,* html .overlay {
位置：絕對;
top: 表達式(eval(document.documentElement.scrollTop) );
}
#AjaxLoading { 邊框：1px 實心#8CBEDA;
顏色：#37a;
字體大小：12px;
字體粗細：粗體；
}
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord {
#AjaxLoading div.loadingWord
}寬度：180px;
高度：50px;
行高：50px;
邊框：2px實線#D6E7F2;
背景：#fff;
}
#AjaxLoading img邊距：10px 15px;
浮動：向左；
顯示：內聯；
}
.overlay {
位置：固定；
頂部：0；
右：0;
底部：0；
左：0;
z 索引：998;
寬度：100%;
高度：100%；
_padding: 0 20pxxx 0 0;
背景：#f6f4f5;
顯示：無；
}
.showbox {
位置：固定；
頂部：0;
左：50%；

z 索引：9999；
不透明度：0;
濾鏡：alpha（不透明度= 0）；

左邊距：-80px; } 2、JS：

複製程式碼


程式碼如下：


** */
function getLoadingHtml(msg) {
if(!msg) msg​​ = "載入";
var html = "

"
「

"
“

"
「

」
"" msg "中，請稍候..."
"

"
“

”
“

”
“

”;
返回html;
}
function ajaxLoadingInit(msg) {
var loadingDiv = getLoadingHtml(msg);
var h = $(document).height(document).height(document).height(document). ();
$(".overlay").css({"height": h});
var div = $("body").find("#loadingDiv");
div .remove();
$("body").append($(loadingDiv));
}
/**
* 載入動畫視窗
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function startLoading(msg) {
ajaxLoadingInit(msg);
$(".overlay").css({'display':'block','opacity':'0.8'});
$(".showbox").stop( true).animate({'margin-top':'300px','opacity':'1'},200);
}
/**
* 開始顯示loading，在ajax執行前呼叫
* @param msg 操作訊息，"載入", "儲存", "刪除"
*/
function endLoading() {

$(".showbox").stop(true).animate({'margin-top':'250px ','不透明度':'0'},400);
$(". overlay").css({'display':'none','opacity':'0'});
}

3、呼叫範例：

複製程式碼

程式碼如下：


startLoading();
$.ajax({
",
url : this.url,
dataType : "json",
data : this.args,
success : 函數(data) {

},
完成: function () {
if (self.showLoading == true) endLoading();

}, 錯誤: this.error });