title: Blur all but one element in the body
body: <p>I'm trying to blur everything on the screen except the loading animation. This is what I have tried.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#addall").click(function() {
    $('#loading').show();
    $('body:not(#loading)').css("filter", "blur(3px)");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="simple-loading" style="display: none" id="loading"&gt;
    &lt;div class="active dimmer"&gt;
      &lt;div class="text loader"&gt;Loading...&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. &lt;a id="addall" href="javascript:void(0)"&gt;Load.&lt;/a&gt; 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.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also I have tried</p>
  
  <pre><code>$("body").each(function(event) {
      if (event.target.id != "loading") {
          $(this).css("filter","blur(3px)");
      }
  });
  </code></pre>
  
  <p>and it never works... Is there any good solution?</p>