jquery animate实现鼠标放上去显示离开隐藏效果
2013-07-21 00:00
651 查看
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 });
相关文章推荐
- css实现 : 鼠标移动上去显示div,移开隐藏div
- jquery实现鼠标移上去某元素显示隐藏的内容,移除继续隐藏
- AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果
- 【jQuery】鼠标进入\离开操作实现div显示\隐藏
- css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型
- div不显示滚动条但实现鼠标移上去可以上下滚动的效果
- 自己实现axure中鼠标移入时隐藏显示的弹出效果,并且实现智能管控隐藏效果,改良弹出效果
- 鼠标放上去显示全部文字,不放上去,显示部分文字jquery效果,包括隐藏部分文字
- 鼠标放上去显示/隐藏效果
- CSS实现DIV感应鼠标Hover时的显示隐藏效果
- C# winform 实现 qq 在屏幕边缘 自动隐藏 鼠标移过去 移上去 又自动显示
- jQuery实现网易相册鼠标移动显示隐藏效果
- JQ实现效果:点击(or鼠标滑过)连接时显示内容,再点击(鼠标滑出)连接时隐藏内容
- jquery animate 鼠标放上去显示,离开就隐藏
- js实现默认文本框信息 鼠标点击时没有离开时显示
- jquery悬停,鼠标移上去显示全部内容(包括多余隐藏内容)
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)
- js实现图片显示局部,鼠标经过显示全部的效果
- jquery hover鼠标划过实现列表页文章内容部分显示隐藏及全部显示切换