title: Ajax wait for Animation to complete
body: <p>I know this topic had been discussed earlier on stackoverflow. But all the results wont help to solve my problem.</p>
  
  <p>I use the "form" jQuery plugin like this:</p>
  
  <pre><code>$(document).ready(function() {
  $('#myForm').ajaxForm({
          data: { Ajax: '1' },
          beforeSubmit:  beforeSEND,  // pre-submit callback
          success:       resultHANDLE  // post-submit callback
          });
      });
  
  function beforeSEND () {
      $('#myForm').fadeTo(0, 0.5);
      $("textarea").addClass('loading');
      $("textarea").animate({backgroundPositionX: 0},1500});  
  }
  
  function resultHANDLE (responseText) {
      // Do somethig with the result
  }
  </code></pre>
  
  <p>In the beforeSEND function a background img is attached to the textarea and is moving from left to right. Kinda like a progress bar.</p>
  
  <p>My problem now: The Ajax request fires and the results are handled, no matter the animation has finished or not.
  How can I force JavaScript to wait for the animation to finish and send AFTER it the request?</p>
  
  <p>Many thanks for your help!!</p>