как размывать контент после вызова ajax - PullRequest
0 голосов
/ 22 декабря 2011

На моей странице используется вызов ajax, который изменяет содержимое блока деления.Я хотел, чтобы содержимое div размылось до загрузки нового содержимого.

Итак,

Шаг 1: нажмите кнопку.

Шаг 2: размытие содержимого этогоблок разделения и пользователь не может ничего выбрать из этого подразделения.

Шаг 3: Контент загружен и возвращается в нормальное состояние.

Шаг 1 и 3 уже выполнены.Что мне нужно, это шаг 2.

Ответы [ 3 ]

1 голос
/ 22 декабря 2011

Допустим, у вашего основного блока контента есть идентификатор 'main'.

в нажатии вашей кнопки, перед загрузкой контента и т. Д. Do:

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();
0 голосов
/ 22 декабря 2011

Я бы создал функцию с onreadystatechange и установил размытие в этой области до readystate==4. Теперь тип размытия и то, как вы хотите, чтобы это было сделано, зависит от вас, но я использовал аналогичную идею для постепенного увеличения и уменьшения текста для вызова ajax с моей функцией fade примерно так.

0 голосов
/ 22 декабря 2011

Если вы используете jQuery, плагин ShowLoading хорошо справляется с этой задачей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...