我试图模糊屏幕上的所有内容,除了加载动画。这就是我尝试过的。
$("#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)");
}
});
它永远不会有效......有什么好的解决方案吗?
问题是你的选择器适用于所有body
元素,然后选择那些没有ID loading
的元素。由于只有一个body
元素,并且它确实没有此ID,因此选择它。当然,这不是你想要的。您想要选择body
元素的所有子元素,然后过滤那些没有loading
ID的子元素。
选择器需要是body > *:not(#loading)
。
澄清一下:这个选择器选择所有元素(*
)......
......那是身体的孩子(body > *
)
......并且没有ID加载(*:not(#loading)
)。
这使用child selector(spec)和negation pseudo-class :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>
不幸的是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>
模糊/ unblur只是做$('#background').css('filter', 'blur(3px))
。
试试这个,
$("#addall").click( function() {
$('#loading').show();
$('body').not("#loading").css("filter","blur(3px)");
});
我改变了,语法的工作方式。希望这可以帮助。
尽管提供了答案,如果有人仍然对此感到头疼。你必须从直接的父母开始你的通配模糊到你想要不要模糊的孩子。就我而言,我必须做这样的事情:
body.modal-open > #wrapper > #page-content-wrapper > #app > div > *:not(#newApplicationModal)
因为如果我完成了
body.modal-open > *:not(#newApplicationModal)
它仍然模糊了一切,因为身体的嵌套孩子是我想要的不模糊物品的父容器,导致父母模糊,内容随之变得模糊。
这很简单。请尝试以下方法:
$('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)");
这对我有用:
body > *:not(#loading > *){
filter: blur(3px);
}