Hello,
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 www.raceramps.com/v3 for an example.
