CODEWITHSUNDEEP
javascriptjquerycss
Matt Nathanson
Matt Nathanson

Reputation: 191

jQuery rotator not rotating properly - too much recursion

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.

Upvotes: 0

Views: 236

Answers (3)

great_llama
great_llama

Reputation: 11729

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

Upvotes: 1

dclowd9901
dclowd9901

Reputation: 6826

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.

Upvotes: 0

zincorp
zincorp

Reputation: 3282

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. =)

Upvotes: 1

Related Questions