title: How to trigger four jQuery media queries
body: <p>So I have 4 media queries, how might I go about triggering these. So far they are gunking up the rest of my script.</p>
  
  <pre><code>function checkPosition() {
      if (window.matchMedia('(min-width: 480px) and (max-width: 787px)').matches) {
          $('.box').hover(
              function(){
                  $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
              }, function() {
                  $(this).find('.project').animate({ height: "66px" }, 200);
              }
          );
      } else if(window.matchMedia('(min-width: 788px) and (max-width: 979px;)').matches) {
          $('.box').hover(
              function(){
                  $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
              }, function() {
                  $(this).find('.project').animate({ height: "83px" }, 200);
              }
          );
      } else if (window.matchMedia('(max-width: 787px)').matches){
          $('.box').hover(
              function(){
                  $(this).find('.project').filter(':not(:animated)').animate({ width: "100%" }, 400);
              }, function() {
                  $(this).find('.project').animate({ width: "150px" }, 200);
              }
          );
      } else {
          $('.box').hover(
              function(){
                  $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
              }, function() {
                  $(this).find('.project').animate({ height: "76px" }, 200);
              }
          );
      }
  }
  </code></pre>
  
  <p>I really want to trigger the same height, but then go back</p>