title: a lot of callback functions
body: <p>I have different effects. I want each one to be executed only when the previous one has finished. The callback function works well when I have 2 or 3 effects. The problem comes when I have a lot of them and each one is quite complex, the code is really difficult to read and follow. Is there any better way to do that? perhaps a more clean and simple way to present the code?</p>
  
  <p>Here is the example to play: <a href="http://jsfiddle.net/83xrg/" rel="nofollow">http://jsfiddle.net/83xrg/</a></p>
  
  <p>JQUERY: </p>
  
  <pre><code>$("#blue").click(function() {
      $("#blue").fadeOut(4000, function() {
         $("#red").fadeIn(4000);  
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="blue"&gt;&lt;/div&gt;
  &lt;div id="red"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#blue{
      position: absolute;
      top: 150px; left: 150px;
      width:200px; height:200px;
      background-color:blue;
      cursor:pointer;
  }
  
  #red{
      position: absolute;
      top:150px; left:150px;
      width:200px; height: 200px;
      background-color:red;
      display:none;
  }
  </code></pre>