jquery animate实现鼠标放上去显示离开隐藏效果
1、CSS样式:
2、JS:
3、调用例子:
代码如下:
@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:
代码如下:
/** * 加载动画窗口 * * @author dendy * @since 2013-7-19 10:13:05 */ function getLoadingHtml(msg) { if(!msg) msg = "加载"; 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 + "中,请稍候..." + "</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)); } /** * 开始显示loading,在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执行完成后(complete)调用 */ function endLoading() { $(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400); $(".overlay").css({'display':'none','opacity':'0'}); }
3、调用例子:
代码如下:
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 });
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17