This article for you to introduce the use of jquery animate implementation of the mouse to display, leaving on the hidden effect, interested friends can refer to ha, I hope to help you
1, CSS style:
Copy Code code as follows:
@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:
Copy Code code as follows:
/**
* Load Animation window
*
* @author Dendy
* @since 2013-7-19 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 ' >"
+ "<img src=" + util.getcontentpath () + "/images/ajax-loader.gif" > "+ msg +", please wait ... "
+ "</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));
}
/**
* Start displaying loading, call
before Ajax execution
* @param msg operation message, "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);
}
/**
* After the completion of the load is hidden, after the completion of Ajax execution (complete) Call
*/
function endloading () {
$ (". Showbox"). Stop (true) animate ({' margin-top ': ' 250px ', ' opacity ': ' 0 '},400);
$ (". Overlay"). CSS ({' Display ': ' None ', ' opacity ': ' 0 '});
}
3. Call Example:
Copy Code code as follows:
Startloading ();
$.ajax ({
Type: POST,
Url:this.url,
DataType: JSON,
Data:this.args,
Success:funct Ion (data) {
},
Complete:function () {
if (self.showloading = = True) endloading ();
},
Error:this.error
});
