jquery animate实现鼠标放上去显示离开隐藏效果

 更新时间:2013年07月21日 17:53:06   作者:  
本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果,感兴趣的朋友可以参考下哈,希望对大家有所帮助
1、CSS样式:
复制代码 代码如下:

@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
});

相关文章

  • jCallout 轻松实现气泡提示功能

    jCallout 轻松实现气泡提示功能

    在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验,如果输入内容不符合相关约定则要进行提示或警告,有一个叫 jCallout 的插件可以轻松实现该功能,该插件基于 jQuery 使用,所以使用前需要添加引用 jQuery
    2013-09-09
  • jQuery 选择器(61种)整理总结

    jQuery 选择器(61种)整理总结

    这篇文章主要介绍了jQuery 选择器(61种)整理的相关资料,需要的朋友可以参考下
    2016-09-09
  • 很棒的学习jQuery的12个网站推荐

    很棒的学习jQuery的12个网站推荐

    jQuery是目前最流行的 JavaScript 库。对于初学者来说,有的时候很难找到一个好的学习jQuery的网站,今天本文收集了12个很棒的 jQuery 学习网站推荐给大家。
    2011-04-04
  • 关于jquery中动态增加select,事件无效的快速解决方法

    关于jquery中动态增加select,事件无效的快速解决方法

    下面小编就为大家带来一篇关于jquery中动态增加select,事件无效的快速解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    这篇文章主要介绍了jQuery中ScrollTo用法,结合实例形式分析了jQuery中ScrollTo的功能、使用方法与相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery获取地址栏参数插件(模仿C#)

    jQuery获取地址栏参数插件(模仿C#)

    前些阵子写了个插件目的就是能够像.net 的 Requst.QuerySting["param"]那样获取地址栏参数。现在拿出来和大家分享。感觉这个插件还是蛮有用的。
    2010-10-10
  • jQuery使用height()获取高度需要注意的地方

    jQuery使用height()获取高度需要注意的地方

    这篇文章主要介绍了jQuery使用height()获取高度需要注意的地方,对于display:none或者隐藏的部分无法获取到其高度,这是使用jQuery的height方法需要注意的地方,需要的朋友可以参考下
    2014-12-12
  • 浅析LigerUi开发中谨慎载入common.css文件

    浅析LigerUi开发中谨慎载入common.css文件

    这一句是载页面载入时,显示正在载入动画效果,但是极大影响了程序开发里的调试。给新手的建议,希望可以参考下
    2013-07-07
  • jQuery+css实现图片滚动效果(附源码)

    jQuery+css实现图片滚动效果(附源码)

    图片滚动效果想必大家都已司空见惯了吧,接下来本文介绍下jQuery+CSS实现图片滚动,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-03-03
  • jQuery中DOM操作原则实例分析

    jQuery中DOM操作原则实例分析

    这篇文章主要介绍了jQuery中DOM操作原则,结合实例形式分析了jQuery针对dom元素操作的四种常见原则,需要的朋友可以参考下
    2019-08-08

最新评论