动态隐藏html,jquery animate实现动态显示与隐藏效果

最新推荐文章于 2023-10-11 10:12:40 发布

漂流·甘草

最新推荐文章于 2023-10-11 10:12:40 发布

阅读量516

点赞数

文章标签：动态隐藏html

本文介绍如何使用jQuery的animate方法实现页面元素的动态显示与隐藏效果，包括CSS样式设置、JavaScript函数定义和实际调用示例。通过startLoading和endLoading函数配合Ajax请求，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节内容：

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

* @edit: www.jbxue.com

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

});