title: How to Use fadeOut with windows.location.href
body: <p>I am trying to make an animation with jQuery. It works in the current page but not when I use window.location.href with Javascript (when x.value is true).</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Test jQuery&lt;/title&gt;
      &lt;link rel="stylesheet"  href="test-alert-1.css"&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;  
      &lt;script&gt;
          function result(){
              var x = document.getElementById("name");
              if (x.value){
                  window.location.href='http://www.google.com';
              }else{
                  alert('This field cannot be empty');
              }
          }
      &lt;/script&gt;
      &lt;script&gt;
          `$`(window).load(function() {
              `$`(".loader").fadeOut("1000");
          })      
      &lt;/script&gt;       
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="loader"&gt; &lt;/div&gt;
      &lt;form action="" method="post"&gt;
          &lt;div&gt;
              &lt;label for="name"&gt;Name :&lt;/label&gt;
              &lt;input type="text" id="name" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      &lt;input type="image" onclick="result();" src="../../image/loupe.png" class="loupe"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.loader {
  background: url(../../image/squares2.gif) no-repeat center;
  cursor: wait;
  height: 100%;
  left: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;}
  </code></pre>