title: Javascript function not working correctly
body: <p>I have an animated menu that functions on the outward but it's stuck on the way back, the first (#section-1) returns perfectly but not other two (#section2, &amp; #section3) sections. Can anybody help me?</p>
  
  <pre><code>$(function() {
      var outTranslate = {
          '-webkit-transform': 'translateX(-100%)',
          '-moz-transform': 'translateX(-100%)',
          '-ms-transform': 'translateX(-100%)',
          '-o-transform': 'translateX(-100%)',
          'transform': 'translateX(-100%)',
          'opacity': '0'
      };
  
      $("span.menu").click(function() {
          $("#section-1").css(outTranslate, function() {
              setTimeout(function() {
                  $("#section-2").css(outTranslate);
              }, 100);
              setTimeout(function() {
                  $("#section-3").css(outTranslate);
              }, 200);
              setTimeout(function() {
                  $("#menu-overlay").fadeOut(750, 'easeOutQuad');
              }, 300);
          });
      });
  });
  </code></pre>