Jquery Stop Image Rotation On Mouseover, Start On Mouseout / Hover

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

Solution 1:

If you were to add this code:

var timerId = null;
functionstartRotation() {
    if (timerId) {
        return;
    }
    timerId = setInterval('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; ImageRotate2()', 7500);
}
functionstopRotation() {
    if (!timerId) {
        return;
    }
    clearInterval(timerId);
    timerId = null;
}

and replace the last line of your code block with a simple call to startRotation();, then you could call stopRotation and startRotation when the mouse hovers over/leaves your element:

$('your-element-selector').hover(stopRotation, startRotation);

Solution 2:

It's not clear what you are trying to do with the three divs without seeing the HTML and more code, so I think a basic example might help you better (demo).

HTML

<divclass="test">image: <span></span></div>

Script

$(document).ready(function(){

 var indx = 0, loop, numberOfFeatures = 5;

 functionimageRotate(){
  indx++;
  if (indx > numberOfFeatures) { indx = 1; }
  $('.test span').text(indx);
  loop = setTimeout( imageRotate , 1000 );
 }
 imageRotate();

 $('.test').hover(function(){
  clearTimeout(loop);
 }, function(){
  imageRotate();
 });

})

Solution 3:

changed things up a little bit, here is how I ended up doing it. `

var animRun = false;
var rotateHover = false;

functionstartRotation() {

            rotateHover = false;
            ImageRotate();
        }

    functionstopRotation() {
        rotateHover = true;
        clearTimeout();
    }

    functionImageRotate() {

    if (rotateHover == false){
    animRun = true;

    varCurrentFeature = "#container" + featureNumber;

    $(CurrentFeature).stop(false, true).animate({'top' : '330px'}, featureDuration, function(){animRun = false;});

    var featureNumber2 = featureNumber+1;
    if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
    varNewFeature = "#container" + featureNumber2;
    $(NewFeature).stop(false, true).animate({'top' : '0px'}, featureDuration); /* rotate slide 2 into main frame */var featureNumber3 = featureNumber-1;
    if ( featureNumber == 1) {featureNumber3 = numberOfFeatures};
    varOldFeature = "#container" + featureNumber3;
    $(OldFeature).stop(false, true).css('top' , '-330px'); /*bring slide 3 to the top*///startRotation();setTimeout('if (featureNumber == numberOfFeatures){featureNumber = 1} else {featureNumber++}; if (rotateHover == false){ImageRotate2()};', featureDelay);
    };
};