html鼠标离开效果,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 = "

"

+ "

+ "

"

+ "

"

+ "" + msg + "中，请稍候..."

+ "

"

+ "

"

+ "

+ "

";

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

});