Question

Is there a way to put those five setTimeouts into one setInterval? I need to somehow switch the parameter of the function after each interval. Basically, I want to be able to clear the animation without having to clear 5 setTimeouts. Here is the anim. http://www.hodaradesign.com. thanks!

<script type="text/javascript">
$(window).load(function () {
    setTimeout ("pulse('1')", 300); 
    setTimeout ("pulse('2')", 500); 
    setTimeout ("pulse('3')", 700); 
    setTimeout ("pulse('4')", 900); 
    setTimeout ("pulse('5')", 1100); 
});

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll"+n).animate({"opacity": "1"}, 350);
    },800)
};

</script>

Answer 1

Try this:

<script type="text/javascript">
$(window).load(function () {
        var iCounter = 1; //variable to keep track of current iteration.
        var interValKey = null;//variable to store the key to clear the interval later.
        setTimeout (function(){
            interValKey = setInterval(function(){
                pulse(iCounter); 
                iCounter++;
                if(iCounter == 6){
                clearInterval(interValKey);
                }
            }, 200);
        }, 300); 
});

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650);
    setTimeout (function (){
        $(".roll"+n).animate({"opacity": "1"}, 350);
    },800)
};

</script>