How to add a delay before calling the function of the next call?

Question

I am trying to create 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 great. The only thing now I want to add a delay after the fadein effect, but I failed to try diff stuffs. So, what can be done to add a delay of several minutes, and then only call the next function, i.e. I want to add a delay after $("#img3").fadeIn(AnimTime) and after the delay call only the Show1() function

Answer 1

Ok, try this. After the animation:

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

Answer 2

What am I doing for this, here: http://gist.github.com/467030

Essentially, so that you don't create a completely unrelated array of functions, animations or not ... and then execute them one by one at a 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 easier than you would like. But the basic idea works very well. Even using jQuery queue () only works for performing subsequent animations on the same elements. These may be completely unrelated functions.

Answer 3

try it

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

You have to execute the sleep function, look here is jQuery plygin

using:

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

Answer 4

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

1000 is in milliseconds.

Answer 5

 setTimeout(MyFunction(), 3000); 

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