title: What am I doing wrong?/ return state with jQuery
body: <p>even though the hamburger is losing popularity I'm making a menu icon that 'morphs' into an 'X' when clicked but I can't return it to the original state when clicked a second time? </p>
  
  <p>with this i would later like to call i menu into view so If there is a better way to accomplish this effect please let me know. </p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="http://static.tumblr.com/majy1x4/u18mpz8h2/reset.styles.css"&gt;
  
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  
          &lt;style type="text/css"&gt;
  
          *{}
  
          body{}
  
          .icon-wrapper{
              position: relative;
              top: 10px;
              left: 10px;
              height: 14px;
              width: 20px;
              z-index: 2;
              -webkit-transition: all 0.2s ease-in-out;
              cursor: pointer;
          }
  
          .top{
              height: 2px;
              width: 20px;
              background: rgba(0,0,0,0.8);
              position: absolute;
              top: 0;
              left: 0;
              cursor: pointer;
          }
  
          .middle{
              height: 2px;
              width: 20px;
              background: rgba(0,0,0,0.8);
              position: absolute;
              top: 6px;
              left: 0;
              cursor: pointer;
          }
  
          .bottom{
              height: 2px;
              width: 20px;
              background: rgba(0,0,0,0.8);
              position: absolute;
              top: 12px;
              left: 0;
              cursor: pointer;
          }
  
          .rotatedown{
              -webkit-transform: rotate(-45deg);
              -webkit-transition: all 0.2s ease-in-out;
              top: 6px;
          }
  
          .rotateup{
              -webkit-transform: rotate(45deg);
              -webkit-transition: all 0.2s ease-in-out;
              top: 6px;
          }
  
  
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="icon-wrapper"&gt;
  
          &lt;div class="top"&gt;&lt;/div&gt;
  
          &lt;div class="middle"&gt;&lt;/div&gt;
  
          &lt;div class="bottom"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;script type="text/javascript"&gt;
  
          $('.icon-wrapper').click(aniOpen);
          $('.top').click(aniOpen);
          $('.middle').click(aniOpen);
          $('.bottom').click(aniOpen);
          $('.rotateup').click(aniClose);
          $('.rotatedown').click(aniClose);
          $('.close').click(aniClose);
  
          function aniOpen(){
              $('.middle').fadeOut('fast');
              $('.top').addClass('rotatedown');
              $('.bottom').addClass('rotateup');
              $('.icon-wrapper').addClass('close');
          }
  
          function aniClose(){
              $('.middle').fadeIn('fast');
              $('.top').addClass('rotatedown');
              $('.bottom').removeClass('rotateup');
              $('.close').removeClass('close');
          }
  
  
  
  
      &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>