Jquery animate enables you to move the mouse up and show off the hidden Effect

1. CSS style:
Copy codeThe Code is as follows:
@ CHARSET "UTF-8 ";
* Html. showbox, * html. overlay {
Position: absolute;
Top: expression(eval(document.doc umentElement. scrollTop ));
}
# AjaxLoading {
Border: 1px solid #8 CBEDA;
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:
Copy codeThe Code is as follows:
/**
* Loading an animation window
*
* @ Author dendy
* @ Since 10:13:05
*/
Function getLoadingHtml (msg ){
If (! Msg) msg = "LOAD ";
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'>"
+ "+ "</Div>"
+ "</Div>"
+ "<Div style = 'height: pixel PX; '> </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 ));
}
/**
* Start to display loading, called before ajax execution
* @ Param msg operation message, "LOAD", "save", "delete"
*/
Function startLoading (msg ){
AjaxLoadingInit (msg );
$ (". Overlay" mirror.css ({'display': 'block', 'opacity ': '0. 8 '});
$ (". Showbox"). stop (true). animate ({'margin-top ': '300px', 'opacity ': '1'}, 200 );
}
/**
* Hide after loading, called after ajax execution is complete (complete)
*/
Function endLoading (){
$ (". Showbox"). stop (true). animate ({'margin-top ': '250px', 'opacity ': '0'}, 400 );
$ (". Overlay" mirror.css ({'display': 'none', 'opacity ': '0 '});
}

3. Call example:
Copy codeThe Code is as follows:
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
});