title: Delaying a jQuery function
body: <p>I've got three instanced of image sliders on a page, that are supposed to fade in a row, one after the other. I'm using innerfade.js</p>
  
  <p>I wanted to have them start at different times, e.g. the first one starting after 2 sec, the 2nd one after 4 sec, the third one after 6 sec. So, the fisrt transition needs to happen after 2 secs, but then it needs to be 6 seconds until the next fade.</p>
  
  <hr>
  
  <p>EDIT:
  They're supposed to appear together at the same time when the page loads and then fade one-by-one.</p>
  
  <hr>
  
  <p>I'm not sure how whether I can achieve this. I've tried using setTimeout as well as .delay, but I couldn't get it to work. The reason is probably that I'm no good with Javascript. But I'd appreciate some help here.</p>
  
  <p>This is where I'm coming from:</p>
  
  <pre><code>$(document).ready(
      function(){
          $('#header-img-1').innerfade2({
              animationtype: 'fade',
              speed: 750,
              timeout: 6000,
              type: 'random_start',
              containerheight: '1em'
          });
  
          $('#header-img-2').innerfade2({
              animationtype: 'fade',
              speed: 750,
              timeout: 6000,
              type: 'random_start',
              containerheight: '1em'
          });
  
          $('#header-img-3').innerfade2({
              animationtype: 'fade',
              speed: 750,
              timeout: 6000,
              type: 'random_start',
              containerheight: '1em'
          });
      }
  );
  </code></pre>
  
  <p>Many thanks.</p>