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

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); });