如何在ajax調用後模糊內容

Question

我在我的頁面上使用ajax調用來更改分塊的內容。 我想要的是讓div內容模糊，直到加載新內容。

所以，

第1步：點擊按鈕。

步驟2：模糊該分區塊的內容，並且用戶無法從該分區中選擇任何內容。

第3步：加載內容並恢復到正常狀態。

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

Answer 1

如果您使用的是jQuery，則ShowLoading plugin可以很好地解決這個問題。

Answer 2

我會用onreadystatechange創建一個函數，並設置該區域的模糊直到readystate==4。現在，模糊的類型以及你想完成的方式將取決於你，但我使用了類似的想法來淡入淡出文本，以便使用我的淡入淡出功能進行ajax調用。

Answer 3

可以說你的主要內容塊有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文件

，添加：

在按鈕的onclick，加載內容等之前..做

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

一次，一切都裝了，你準備unblur，請執行以下操作：

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