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

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

• javascript
• jquery
• delay

Share Improve this question Follow edited Sep 22, 2014 at 13:30 Huangism 16.4k77 gold badges5050 silver badges7575 bronze badges asked Jul 21, 2010 at 16:10 KoolKabinKoolKabin 17.7k3737 gold badges111111 silver badges145145 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Okay, try this. After your animations:

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

What I do for this is here in this gist: http://gist.github./467030

Essentially it lest you create a pletely unrelated array of functions, animations or not... and then execute them one by one at the given interval.

// create an array of functions to be executed
// everything in each step would be executed simultaneously
var myFuncs = [
    // Step #1
    function () {
        $("#img1").fadeOut(200);
        doSomething();
        doSomethingElseAtTheSameTime();
    },
    // Step #2
    function () {
        doOtherStuff();
    },
    // Step #3
    function () {
        woohoo();
    }
];

// then, the function in that gist: 
// Simple function queue runner. Just pass me an array of functions and I'll
// execute them one by one at the given interval.
var run_queue = function (funcs, step, speed) {
step = step || 0;
speed = speed || 500;
funcs = funcs || [];

    if (step < funcs.length) {
        // execute function
        funcs[step]();

        // loop it
        setTimeout(function () {
            run_queue(funcs, step + 1);
        }, speed);
    }

    return;
};

// run them.
run_queue(myFuncs, 0, 1000);

Obviously, this is simpler than you'd want. But the basic idea works really well. Even using jQuery queue() only works for performing subsequent animations on the same items. These can be pletely unrelated function executions.

try this

$("#img3").delay('1000').fadeOut(AnimTime);

You have to do a sleep function take a look here it's a jQuery plygin

usage:

$.sleep(3, function(){alert("I slept for 3 seconds!");});

use $("#img3").fadeIn(AnimTime).delay('1000')

1000 is in milliseconds.

setTimeout(MyFunction(), 3000);

I would do this to simply pause 3 seconds before executing the MyFunction. Hope this helps...