Delaying a jQuery function
<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>
