Question

我试图模糊屏幕上的所有内容，除了加载动画。这就是我的尝试。

$("#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>

我也试过

$("body").each(function(event) {
    if (event.target.id != "loading") {
        $(this).css("filter","blur(3px)");
    }
});

它永远不会有效......有什么好的解决方案吗？

Answer 1

问题是您的选择器适用于所有loading元素，然后选择那些没有ID body的元素。由于只有一个body元素，并且它确实没有此ID，因此选中它。当然，这不是你想要的。您要选择 {/ 1}}元素的所有子项，然后过滤那些没有loading ID的子项。

选择器必须为body > *:not(#loading)。

澄清：此选择器选择所有元素（*）...
......那是身体的孩子（body > *）
...并且没有ID加载（*:not(#loading)）。

这使用inserting the file in a new folder（child selector）和spec（negation pseudo-class :not()）。

＆＃13;
＆＃13;
body > *:not(#loading) { background: #ffd83c; filter: blur(3px); } div, p { margin: 10px; padding: 5px; }
＆＃13;
<div>Some DIV.</div> <div id="loading">Loading DIV</div> <div>Some other DIV.</div> <p>A paragraph.</p>
＆＃13;
＆＃13;
＆＃13;

Answer 2

试一下

您只能使用css实现此目的。不需要JQUERY

请参阅以下代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

不幸的是you cannot blur an HTML node without blurring its children。

一种解决方案是将您的内容和加载图像加载到父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))。

Answer 4

试试这个，

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

我已经改变了，语法的工作方式。希望这会有所帮助。

Answer 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)");

Answer 6

这对我有用：

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

Answer 7

尽管提供了答案，但仍有人对此抓挠。您必须开始将通配符模糊化，从直接父级模糊到想要取消模糊的子级。就我而言，我必须做这样的事情：

body.modal-open > #wrapper > #page-content-wrapper > #app > div > *:not(#newApplicationModal)

因为我只是做了

body.modal-open > *:not(#newApplicationModal)

它仍然使一切模糊不清，因为嵌套的身体子项是我想要的未模糊项的父容器，导致父项变得模糊，内容也随之模糊。

模糊身体中除一个元素之外的所有元素

7 个答案: