title: How should I call 3 functions in order to execute them one after the other?
body: <p>If I need call this functions one after other,</p>
  
  <pre><code>$('#art1').animate({'width':'1000px'},1000);        
  $('#art2').animate({'width':'1000px'},1000);        
  $('#art3').animate({'width':'1000px'},1000);        
  </code></pre>
  
  <p>I know in jQuery I could do something like:</p>
  
  <pre><code>$('#art1').animate({'width':'1000px'},1000,'linear',function(){
      $('#art2').animate({'width':'1000px'},1000,'linear',function(){
          $('#art3').animate({'width':'1000px'},1000);        
      });        
  });        
  </code></pre>
  
  <p>But, let's assume that I'm not using jQuery and I want to call:</p>
  
  <pre><code>some_3secs_function(some_value);        
  some_5secs_function(some_value);        
  some_8secs_function(some_value);        
  </code></pre>
  
  <p>How I should call this functions in order to execute <code>some_3secs_function</code>, and AFTER that call ends, then execute <code>some_5secs_function</code> and AFTER that call ends, then call <code>some_8secs_function</code>?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>This still not working:</p>
  
  <pre><code>(function(callback){
      $('#art1').animate({'width':'1000px'},1000);
      callback();
  })((function(callback2){
      $('#art2').animate({'width':'1000px'},1000);
      callback2();
  })(function(){
      $('#art3').animate({'width':'1000px'},1000);
  }));
  </code></pre>
  
  <p>Three animations start at same time</p>
  
  <p>Where is my mistake?</p>