Question

我正在我的页面上使用ajax调用来更改分区块的内容。我想要的是在加载新内容之前使div内容模糊。

所以，

第1步：点击按钮。

第2步：模糊该分区块的内容，用户现在无法从该分区中选择任何内容。

第3步：加载内容并恢复正常状态。

步骤1和3已经完成。我需要的是第2步。

Answer 1

假设您的主要内容块的ID为“main”。

在按钮的onclick中，在加载内容等之前..执行：

var pos = $('#main').offset();
var size = { w: $('#main').outerWidth(), h: $('#main').outerHeight() };
$('<div class="main_overlay"></div>')
  .css({left: pos.left+'px', top: pos.top+'px', width: size.w+'px', height: size.h+'px'})
  .appendTo('body');

在你的css文件中，添加：

.main_overlay {
  position: absolute;
  background-color: #fff;
  opacity: 0.5;
}

一次，所有东西都被加载，你准备好解开，做：

$('.main_overlay').remove();

Answer 2

如果您正在使用jQuery，ShowLoading plugin可以很好地解决这个问题。

Answer 3

我会使用onreadystatechange创建一个函数，并在readystate==4之前为该区域设置模糊。现在，模糊的类型以及你想要完成的方式取决于你，但是我使用类似的想法来淡入淡出文本，使用我的淡入淡出函数进行ajax调用。

如何在ajax调用后模糊内容

3 个答案: