I have built a jQuery rotator to rotate through 3 divs and loop them. I would like to add the functionality on mouse over to "freeze" the current div and then start again on mouse out.

I've thought about setting a variable to false at the start of the function and setting it true when it's on it's current frame but I've got my self a bit confused.

I've also tried to use the hover function but when using the in and out handlers, I'm confused as to how to stop, restart the animation.

  function ImageRotate() {
 var CurrentFeature = "#container" + featureNumber;

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


 var featureNumber2 = featureNumber+1;
 if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
 var NewFeature = "#container" + featureNumber2;
 $(NewFeature).stop(false, true).delay(4500).animate({'top' : '0px'}, 3000); 

 var featureNumber3 = featureNumber-1;
 if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
 var OldFeature = "#container" + featureNumber3;
 $(OldFeature).stop(false, true).delay(4500).css('top' , '-330px'); 

 setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500)};

Any help would be greatly appreciated!! Thanks, Matt