title: jQuery div animate from left to right and comes back after pause
body: <p>I'm trying to slide a div from the left to the right side when the 'submit' button is clicked. After a little pause, the div would automatically slides back to it's original position. Currently it goes to the right side but it isn't coming back to the left corner.</p>
  
  <p>CSS</p>
  
  <pre><code>#mainform{
      position: absolute;
      display: block;
      padding-top:20px;
      font-family: 'Fauna One', serif;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div id="mainform"&gt;
  
          &lt;!-- Required div starts here --&gt;
          &lt;form id="form"&gt;
              &lt;h3&gt;Contact Form&lt;/h3&gt;
              &lt;div class="hello"&gt;&lt;/div&gt;
             &lt;input type="button" id="submit" value="Send Message"/&gt;
          &lt;/form&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>  $(document).ready(function() {
              $('#submit').click(function(e) {
                  reslide();
  
                  function reslide() {
                      $('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
                          setTimeout(reslide, 3000);
                      });
                  }
                  $('.hello').fadeIn(1500);
                  $("&lt;b&gt;Successfully send&lt;/b&gt;").appendTo(".hello");
                  $('.hello').fadeOut(2500);
              });
  });
  </code></pre>