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 調用。