jquery multiple function timing and repeat

Question

I've created somewhat of a movie using jquery; it's composed of multiple functions representing each scene of the movie. Some scenes have to run longer than others. I'm having trouble creating a loop of the total movie. I've tried setting up setInterval several ways but they all seem to fail. To complicate things (for me at least) this is inside of a slide show that would ideally trigger the "next" button when it's complete.

feel free to knock the strategy I've used as the setTimeout for each scene was the only way I could figure out how to get each function to run after the next has ran for long enough. I couldn't figure out how to call each function with the amount of time that scene should run for vs. my current strategy of calling the next function after the previous one is complete.

Thanks for the direction

I think I need javascript to calculate the total time and call the atrAnime() in a setTimeout with the value but I can't seem to get it to calculate and pass back.

here's what I have:

$(document).ready(function(){

    atrAnime(2000);

});
function atrAnime(dur){
    first();
    setTimeout(second, dur);
    setTimeout(third, dur += 2000);
    setTimeout(forth, dur += 2000);
    setTimeout(fifth, dur += 2000);
    setTimeout(sixth, dur += 6000);
    setTimeout(seventh, dur += 2000);
    setTimeout(eighth, dur += 2000);
    setTimeout(ninth, dur += 2000);
    setTimeout(tenth, dur += 2000);
    setTimeout(end, dur += 3000);

};

Some scene examples:

function first(dur){

    $('.pcba')
        .css({
            left: '150px'
            })
        .show();
    $('.pcb_cad')
        .css({
            left: '275px',
            top: '50px'
            })
        .show();
}
function second(dur){
        $('.pcba').fadeOut();
        $('.arrows')
        .css({
            left: '275px',
            top: '50px'
            })
        .fadeIn();
        $('.heatGenComps')
            .css({
                left: '325px',
                top: '20px'
                })
        .fadeIn();

}

EDIT My new ghetto solution has the last function in atrAnime() call as:

setTimeout(caller, dur += 2000);

};

and then another function

function caller(){
    atrAnime(2000);
}

Answer 1

You are using some functions in your animations that actually provide a callback method once their action is completed. For example, the fadeIn / fadeOut functions have an "onComplete" callback for when the element has totally been shown/hidden -

$("#elem").fadeOut(function(){
  alert('element has faded out!');
});

You could possible utilize these callback function, having them all call one central function that manages the sequence of execution. Each callback would trigger the next sequence. Both the show() and fadeIn() functions provide this callback as detailed in the documentation.

• show()
• fadeIn()

Answer 2

Wouldn't it better to nest all animations in callbacks? It just doesn't feel right relying on setTimeout :). What I mean is using the callbacks of the relevant animations so the next stage of animation will only fire once the previous one is finished. Something along the lines of:

$("firstElement").slideDown(500, function () { 
    $("secondElement").slideDown(500, function () { 
        $("thirdElement").slideDown(500, function () { 
            //etc
        });         
    });  
});