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
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.com/467030
Essentially it lest you create a completely 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 completely 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!");});
setTimeout(MyFunction(), 3000);
I would do this to simply pause 3 seconds before executing the MyFunction. Hope this helps...
use $("#img3").fadeIn(AnimTime).delay('1000')
1000
is in milliseconds.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.