How to add delay before calling next call back function?

Question

I am trying to make a javascript banner. I have 3 images inside a div with ids #img1, #img2 n #img3.

<script src="scripts/jquery-latest.min.js" type="text/javascript"></script> 
<script> 
    var AnimState = true;
    var AnimTime = 2000;
    var AnimDelay = 3000;
    $(document).ready( function()
    {
        $('#image img').hide();
        $('#img3').show();
        Show1();
    });
    function Show1()
    {
        if( AnimState === true )
        {
            $("#img3").fadeOut(AnimTime);
            $("#img1").fadeIn(AnimTime, Show2);
        }
    }
    function Show2()
    {
        if( AnimState === true )
        {
            $("#img1").fadeOut(AnimTime);
            $("#img2").fadeIn(AnimTime, Show3);
        }
    }
    function Show3()
    {
        if( AnimState === true )
        {
            $("#img2").fadeOut(AnimTime);
            $("#img3").fadeIn(AnimTime, Show1);
        }
    }
    $('#btn1').click( function()
    {
       AnimState = !AnimState;
       Show1(); 
    }); 
</script> 

It works fine. The only thing is that now i want to add the delay after fadein effect but trying diff stuffs i failed. So what can be done to add delay for few mins and then only call next function ie. I want to add delay after $("#img3").fadeIn(AnimTime) and after delay only call Show1() function

Answer 1

Okay, try this. After your animations:

$("#img1").fadeOut(AnimTime);
$("#img2").fadeIn(AnimTime);
setTimeout(Show3, 30000); //delays next call for 30 seconds