0
309
VistasDesenfocar todos menos un elemento en el cuerpo
Estoy tratando de desenfocar todo en la pantalla excepto la animación de carga. Esto es lo que he probado.
$("#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>También he probado
$("body").each(function(event) { if (event.target.id != "loading") { $(this).css("filter","blur(3px)"); } });y nunca funciona... ¿Hay alguna buena solución?
3 Respuestas
Responde la pregunta0
El problema es que su selector funciona en todos los elementos del body y luego elige los que no tienen ID loading . Dado que solo hay un elemento de body y, de hecho, no tiene este ID, se selecciona. Por supuesto, esto no es lo que quieres. Desea seleccionar todos los elementos secundarios del elemento del body y luego filtrar aquellos que no tienen la ID de loading .
El selector debe ser body > *:not(#loading) .
Para aclarar: este selector selecciona todos los elementos ( * )...
...que son hijos del cuerpo ( body > * )
... y no tiene ID cargando ( *:not(#loading) ).
Esto usa el selector de niños ( spec ) y la pseudo-clase de negación :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>0
Prueba esto
Puede lograr esto usando solo css. SIN NECESIDAD DE JQUERY
Por favor vea el siguiente código
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> 
0
Desafortunadamente , no puede desenfocar un nodo HTML sin desenfocar sus elementos secundarios .
Una solución es poner su contenido y cargar la imagen en dos div s dentro de un div principal como el siguiente.
<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> Para desenfocar/desenfocar simplemente haga $('#background').css('filter', 'blur(3px)) .