0

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 :)

2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by cgull
0

Hi, wouldn't stop just stop it altogehter and won't start again? Thanks

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.