title: jQuery ajax, wait until beforeSend animation finishes
body: <p>HTML &amp; CSS:</p>
  
  <pre><code>&lt;a href="#"&gt;link&lt;/a&gt;
  &lt;img src="http://2.bp.blogspot.com/_OIHTbzY7a8I/TOaiTKLqszI/AAAAAAAAAHM/eb3iiOqxzKg/s640/Auto_Audi_Audi_concept_car_005130_.jpg" /&gt;
  &lt;div&gt;&lt;/div&gt;
  
  img { display: none; }
  a { display: block; }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("a").click(function(){
      $.ajax({
          url: "test.php",
          contentType: "html",
          beforeSend: function(){
              $("img").fadeIn(600, function(){
                  $("div").append(" | beforeSend finished | ");
              });
          },
          error: function(){
              $("div").append(" | error | ");
          }
      });
      return false
  });
  </code></pre>
  
  <p>The problem is, <code>error</code> function starts, before animation in <code>beforeSend</code> function finishes.</p>
  
  <p>Here is working example <a href="http://jsfiddle.net/H4Jtk/2/" rel="nofollow">http://jsfiddle.net/H4Jtk/2/</a></p>
  
  <p><code>error</code> should begin to work only when <code>beforeSend</code> is finished. <strong>How to do this?</strong></p>
  
  <p>I use <code>beforeSend</code> function to start animation of the blocks when ajax starts. I can't remove it.</p>
  
  <p>Thanks.</p>