Размыть все, кроме одного элемента в теле

Я пытаюсь размыть все на экране, кроме анимации загрузки. Это то, что я пробовал.

$("#addall").click(function() {
  $('#loading').show();
  $('body:not(#loading)').css("filter", "blur(3px)");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
  <div class="active dimmer">
    <div class="text loader">Loading...</div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>

Ответ 1

Проблема заключается в том, что ваш селектор работает со всеми элементами body, а затем выбирает те, у которых нет идентификатора loading. Поскольку существует только один элемент body, и он действительно не имеет этого идентификатора, он выбирается. Конечно, это не то, что вы хотите. Вы хотите выбрать всех дочерних элементов body, а затем отфильтровать те, у которых нет идентификатора loading.

Селектор должен быть body > *:not(#loading).

Чтобы уточнить: этот селектор выбирает все элементы (*)...
... которые являются дочерними элементами тела (body > *)
... и не имеют загрузки ID (*:not(#loading)).

Здесь используется дочерний селектор (spec) и отрицательный псевдокласс :not() (spec).

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}

<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

Ответ 2

Попробуйте

Вы можете достичь этого, используя только css. НЕТ НЕОБХОДИМОСТИ ДЛЯ JQUERY

Пожалуйста, смотрите ниже код

body > *:not(#loading) {
  filter: blur(3px);
}

<div>Some DIV.</div>
<div id="loading">Loading DIV
    <div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

Ответ 3

К сожалению вы не можете размыть HTML node, не размывая своих детей.

Одним из решений является размещение вашего содержимого и загрузка изображения в два div внутри родительского div, как показано ниже.

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
    <div id="loading">Spinner...</div>
</div>

Чтобы размыть/размыть, просто $('#background').css('filter', 'blur(3px)).

Ответ 4

Попробуйте это,

$("#addall").click( function() {
    $('#loading').show();
    $('body').not("#loading").css("filter","blur(3px)");
});

Я изменил, как работает синтаксис. Надеюсь, это поможет.

Ответ 5

Это просто. Попробуйте следующее:

$('body').not("#loading").css("filter","blur(3px)");

Вышеуказанный селектор выбирает все тело, кроме элемента с загрузкой id.

Однако я исправил синтаксис, но это не будет размываться, кроме загрузки, потому что все под телом будет размыто. Вам нужно изменить структуру html, например:

 <body>
    <div id="loading">Here your logic image..text or whatever</div>
    <div id="bodyContainer">Your whole html that was in your body</div>
 </body>

Теперь в jquery вы можете сделать следующее:

 $('#bodyContainer').css("filter","blur(3px)");