jquery animate は、マウスを置いたときの表示、放置、非表示の効果を実装します_jquery

1、CSS样式：

复制代码代码如下:

@CHARSET "UTF-8" ;
* html .showbox,* html .overlay {
位置: 絶対;
トップ: 式(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
border: 1px ソリッド #8CBEDA;
カラー: #37a;
フォントサイズ: 12px;
フォントの太さ: 太字;
}
#AjaxLoading div.loadingWord {
width: 180px;
高さ: 50px;
行の高さ: 50px;
ボーダー: 2 ピクセルの実線 #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;
フィルター: alpha(不透明度 = 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) {
varloadingDiv = getLoadingHtml(msg);
var h = $(document).height();
$(".overlay").css({"height": h});
var div = $("body").find("#loadingDiv");
div.remove();
$("body").append($(loadingDiv));
}
/**
* 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 実行完了(完了)後に呼び出します
*/
function endLoading() {
$(".showbox").stop(true).animate({'margin-top':'250px ','不透明度':'0'},400);
$(".overlay").css({'display':'none','opacity':'0'});
}

3、调用例:

复制代码 代码如下:

startLoading();
$.ajax({
type : "POST",
url : this.url,
dataType : "json",
data : this.args,
success : function (データ) {

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