Pause Animation When Hovered Over It

Question

This is my first post on here but I have used this site as a great reference for years. I am simply trying to get my slide show to pause when I hover over it. The code is below. I tried using the jquery hover to stop it but I am not having any success. Anyone have any ideas?

$(function() {
    // create the image rotator
    setInterval("rotateImages()", 7000);
});

function rotateImages() {
   var oCurPhoto = $('#photoShow div.current');
   var oNxtPhoto = oCurPhoto.next();
   if (oNxtPhoto.length == 0)
      oNxtPhoto = $('#photoShow div:first');

    oCurPhoto.removeClass('current').addClass('previous');
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            oCurPhoto.removeClass('previous');
        });
}

Awesome! Thanks Nicos! It worked when I plugged it in our dev environment. I was close on my go so next time I will post my code for others to see. — Nick Piazza, Feb 05 '13 at 20:14

score 0 · Answer 1 · answered Feb 05 '13 at 19:54

In the way you are implementing i can only recomend a var to store the status of the rotation.

like this:

var canRotate = true;

$(function() {
    // create the image rotator
    setInterval("rotateImages()", 7000);
});

function rotateImages() {
   if(!canRotate) { return; }
   var oCurPhoto = $('#photoShow div.current');
   var oNxtPhoto = oCurPhoto.next();
   if (oNxtPhoto.length == 0)
      oNxtPhoto = $('#photoShow div:first');

    oCurPhoto.removeClass('current').addClass('previous');
    oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
        function() {
            oCurPhoto.removeClass('previous');
        });
}

This should work fine.

P.S.: You could also look for the method .stop() in jQuery library. this will send a stop request to the object that is curently animating.

score 0 · Answer 2 · answered Feb 05 '13 at 20:01

It maybe ugly but this should work

$(function() {
    var myTimer = 0;
    myTimer = setInterval("rotateImages()", 7000);

    $('#photoShow').mouseover(function() {
            clearInterval(myTimer);
      }).mouseout(function(){
            myTimer = setInterval("rotateImages()", 7000);
      });
});

Pause Animation When Hovered Over It

2 Answers2