jQuery rotator not rotating properly - too much recursion

Question

I've built a custom jQuery rotator using just basic animation to rotate the 3 Divs (images). I've built the function and then reinitiate the function using it as a call back. Here's the code:

function ImageRotate() {

    var CurrentFeature = "#container" + featureNumber;

    $(CurrentFeature).stop(false, true).delay(4500).animate({'top' : '330px'}, 3000);

    var featureNumber2 = featureNumber-1;
    if ( featureNumber == 1) {featureNumber2=3}
    var CurrentFeature2 = "#container" + featureNumber2;
    $(CurrentFeature2).stop(false, true).delay(4500).animate({'top' : '0px'}, 3000); 
    $('#container2').stop(false, true).delay(4500).animate({'top' : '-330px'}, 25); 

    var featureNumber3 = featureNumber+1;
    if ( featureNumber == 3){featureNumber3=1}
    var CurrentFeature3 = "#container" + featureNumber3;
    $(CurrentFeature3).stop(false, true).delay(7500).animate({'top' : '0px'}, 3000);
    $(CurrentFeature2).stop(false, true).delay(4500).animate({'top' : '330px'}, 3000);
    $(CurrentFeature).stop(false, true).delay(4500).animate({'top' : '-330px'}, 25);

    if (featureNumber ==1) {featureNumber=3} else{featureNumber--};
    $(CurrentFeature).stop(false, true).delay(7500).animate({'top' : '0px'}, 3000);
    $(CurrentFeature3).stop(false, true).delay(4500).animate({'top' : '330px'}, 3000);
    $(CurrentFeature2).stop(false, false).delay(4500).animate({'top' : '-330px'}, 25,ImageRotate());
};

It's worth noting that when calling the function again I also tried making another function called ImageRotate2(); and it did the same thing. It loops, but i get all sorts of funkiness.

Edit: I've also tried some answers in the replies and they both leave me with recursion errors each second.

Answer 1

Change this line:

$(CurrentFeature2).stop(false, false).delay(4500).animate({'top' : '-330px'}, 25,ImageRotate());

to be

 $(CurrentFeature2).stop(false, false).delay(4500).animate({'top' : '-330px'}, 25,ImageRotate);

You need to pass the handle to a function, not the result of the calling the function. =)

Answer 2

Either pass in the function (when you put the parentheses after it, it's actually calling it right then and there and not passing a reference to it) OR nest it in an function definition, like this:

$(CurrentFeature2).stop(false, false).delay(4500).animate({'top' : '-330px'}, 25,function {ImageRotate()});

EDIT:

Rather than call the function, try queueing it up with setTimeout:

..., function() { window.setTimeout(ImageRotate, 1000); });

Answer 3

I'm not understanding why it wouldn't give you recursion errors. There doesn't appear to be any instance where it stops calling itself, unless the code is just making my eyes bleed.

If you don't have a way for the code to stop propogating, it's going to return an error.