Question

Under $(document).ready(function(), I have the following code:

num = $("#mainContentCategoryLinksWrapper > div").size();

This makes num equal the length of the children of #mainContentCategoryLinksWrapper. Currently, this equals 4. Above the $(document).ready(function( I have this:

var timesRun = 0;

    function slideshow(){


        if(timesRun < num){
                     $(".arrowIn").stop().animate({color: "#a12324", textIndent: "30px", backgroundPosition: '0px 0px'}, 100, function(){ //the first child in the series has a class of "arrowIn"

                                                                        $(".arrowIn").next().addClass("replaceMe"); //Adds the ".replaceMe" placeholder the the next element.
                                                                          $(".arrowIn").removeClass("arrowIn"); //Deletes the class on the current element
                                                                          $(".replaceMe").addClass("arrowIn").removeClass("replaceMe"); //reassigns ".arrowIn" over ".replaceMe"    
                                                                          timesRun = timesRun + 1; //increases number of times run

                                                                                                                                        }).prev().animate({color: "#000000", textIndent: "25px", backgroundPosition: '0px -25px'}, {duration: 50}); //puts the previous element back to it's original position

                        }else{

                            timesRun = 0;
                            $(".arrowIn").removeClass("arrowIn");
                            $("#mainContentCategoryLinksWrapper:first-child").addClass("arrowIn"); //this is supposed to reset timesRun, and set the first child in the series back to the original ".arrowIn" 
                }




    }

setInterval( 'slideshow()', 1000 );

So here is the what the code does:

1) Animates the first in the series of 4 (#1) timesRun = 1
2) Animates the second in the series of 4 (#2) timesRun = 2
3) Animates the third in the series of 4 (#3) timesRun = 3
4) Animates the fourth in the series of 4 (#4) timesRun = 4
5) timesRun is now longer less than num. Reset class names back to original to .arrowIn, set timesRun to 0.

However, when the slideshow() is reexectuted, it doesn’t start over.

Any ideas? See http://www.raceramps.com/v3 for an example.

Answer 1

it seems to me that you declared the function inside $(document).ready() block.
if that so it will sure will not work because the function life cycle is limited to the “ready” block and when it finishes the declarations will not be visible to any other elements outside the “ready” block
so what you should do is declare the function outside the “ready” as follow

function slideshow(){
// your stuff
}
$(document).ready(
function () {setInterval( 'slideshow()', 1000 );
}
)

Update:
try to make the reset line selector same as the get size selector, like this

$("#mainContentCategoryLinksWrapper>div:first-child").addClass("arrowIn");