title: jQuery code malfunction
body: <p>i'm building my website and i'm running into some problems… For the landing page i want to make this thing where you have to enter a PW to get in, so i have a text input and beside it there are two divs with 50% width, one floated to the left and the other to the right. </p>
  
  <p>I want it so that when the PW is entered and the RETURN key is entered, the input would fade, and the divs that were behind it would slide to their respective sides. </p>
  
  <p>This works fine. But when I then click the Close button, I want them the two divs to slide back in and return back to their original position.  Well, i tried it on <a href="http://codepen.io/angus/pen/GjEaOo" rel="nofollow noreferrer">CodePen</a> and worked ok, but when i migrated it to <a href="http://angusweb.pw" rel="nofollow noreferrer">my site</a> it kinda went crazy. Here is the <a href="https://github.com/dangus21/dangus21.github.io" rel="nofollow noreferrer">repository for my website</a>.</p>
  
  <p>the html: </p>
  
  <pre><code>&lt;div class="input-div"&gt;
      &lt;i class="fa fa-lock" aria-hidden="true"&gt;&lt;/i&gt;   
          &lt;input id="secret" type="password" /&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
      &lt;div class="left to-hide"&gt;&lt;/div&gt;
      &lt;div class="right to-hide"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container2"&gt;
      &lt;button&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the css: </p>
  
  <pre><code>html, body {
      width:100%;
      height:100%;
  }
  
  .container {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
  }
  
  .left {
      width:50%;
      height:100%;
      background-color:#222;
      float:left;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-right: 1px solid #111;
  }
  
  .right {
      width:50%;
      height:100%;
      background-color:#222;
      float:right;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border-left: 1px solid #111;
  }
  
  .input-div {
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      position:fixed;
      z-index:99;
  }
  
  input {
      width:300px;
      height:50px;    
      font-size:3em;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      margin:10px;
      text-align:center;
  }
  
  .fa-lock {
      font-size:3em;
      color:white; 
  }
  
  .container2 {
      background-color:crimson;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
  }
  
  button {
      width:100px;
      height:50px;
  }
  </code></pre>
  
  <p>and the jQuery:</p>
  
  <pre><code>$('.right , .left').show();
  
  $(function() {
      $('input').keypress(function(e) {
          if (e.keyCode == 13) {
              if (!$(this).val()) { //if it is blank. 
                  alert('Denied');
              } else {
                  $('.input-div').fadeOut();
                  $('.to-hide').animate({
                          width: "0"
                      },
                      1000,
                      function() {
                          $('.container').hide();
                      });
              }
          }
      });
  });
  
  $('button').click(function() {
      $('.container').show();
      $('.input-div').fadeIn(1500);
      $('.to-hide').animate({width: "50%" }, 1000, function() {});
  });
  </code></pre>