Hello,
I am trying to create a jquery banner.
I found lots of tutorials and managed to create a banner but I still need some help.
I have 4 divs:
First div slides from top
Then
Second div fades in
Then
Third div fades in and changes it's width
Then
Fourth div slides from botton to top
My question is, is there a way to pause or delay all the animations together after the last animation finished.
Also, is there a better way to do what I did since I am quite confused with all the tutorials.
My html:
<div id="bannerTop"><img src="<?=site_url()?>assets/images/events/centenaryTop_01.png" class="ca_shown" alt=""/></div>
<div id="bannerTopTwo"><img src="<?=site_url()?>assets/images/events/centenaryTop_02.png" class="ca_shown" alt=""/></div>
<div id="bannerDest"><img src="<?=site_url()?>assets/images/events/centenaryDestination.png" class="ca_shown" alt=""/></div>
<div id="bannerBottom"><img src="<?=site_url()?>assets/images/events/centenaryBottom.png" class="ca_shown" alt="" /></div>
My jquery:
var calls = [];
function executeNext(next) {
if(calls.length == 0) return;
var fnc = calls.pop();
fnc();
if(next) { executeNext(true); }
}
/*To call method chain synchronously*/
calls.push(bannerTop);
calls.push(bannerTopTwo);
calls.push(bannerDest);
calls.push(bannerBottom);
executeNext(true);
function bannerTop()
{
$("#bannerTop").animate({top:"+=65px", opacity: "1"},1000).delay(5000).animate({top: "-=65px", opacity: "0"}, 0);
setTimeout("bannerTop()",3000);
}
function bannerTopTwo()
{
$('#bannerTopTwo').delay(1000);
$("#bannerTopTwo").animate({opacity: "1"}, 1500).delay(3500).animate({opacity: "0"}, 0);
setTimeout("bannerTopTwo()",3000);
}
function bannerDest()
{
$('#bannerDest').delay(2000);
$("#bannerDest").animate({width: "225", opacity: "1"}, 1000).delay(3000).animate({width: "0", opacity: "0"}, 0);
setTimeout("bannerDest()",3000);
}
function bannerBottom()
{
$('#bannerBottom').delay(3000);
$("#bannerBottom").animate({top: "-=50", opacity: "1"}, 1000).delay(2000).animate({top: "235", opacity: "0"}, 0);
setTimeout("bannerBottom()",3000);
}
Thank you :)
