Анимация паузы при наведении на нее

Question

Это мой первый пост здесь, но я использовал этот сайт как отличный справочник в течение многих лет. Я просто пытаюсь заставить мое слайд-шоу остановиться, когда наведу на него курсор. Код ниже. Я пытался использовать jquery hover, чтобы остановить его, но у меня ничего не получилось. У кого-нибудь есть идеи?

$(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');
        });
}

Answer 1

Это может быть некрасиво, но это должно работать

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

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

Answer 2

В способе, которым вы реализуете, я могу только рекомендовать переменную для хранения статуса вращения.

как это:

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

Это должно работать нормально.

PS: Вы могли бы также искать метод .stop() в jQuery библиотека. это отправит запрос на остановку объекту, который в данный момент анимируется.