ajax调用后如何模糊内容

Question

我在我的页面上使用 ajax 调用来更改分割块的内容。 我想要的是使该 div 内容模糊，直到加载新内容。

所以，

第1步：点击按钮。

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

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

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

Answer 1

假设您的主要内容块具有 id 'main'。

在您的按钮的点击中，在加载内容等之前。做：

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 插件可以很好地完成此工作。

Answer 3

我会创建一个带有onreadystatechange的函数并对该区域设置模糊，直到readystate==4 。 现在模糊的类型以及您希望如何完成将取决于您，但我使用类似的想法来淡入和淡出文本，以使用我的淡入淡出函数进行 ajax 调用。