jquery在鼠标悬停时停止图像旋转，在鼠标悬停/悬停时开始答案

【问题标题】：jquery stop image rotation on mouseover, start on mouseout / hoverjquery在鼠标悬停时停止图像旋转，在鼠标悬停/悬停时开始
【发布时间】：2010-04-22 22:23:36
【问题描述】：

我已经构建了一个 jQuery 旋转器来旋转 3 个 div 并循环它们。我想在鼠标悬停时添加功能以“冻结”当前 div，然后在鼠标移出时重新开始。

我曾考虑在函数开始时将变量设置为 false，并在当前帧上将其设置为 true，但我有点困惑。

我也尝试过使用悬停功能，但是在使用 in 和 out 处理程序时，我对如何停止、重新启动动画感到困惑。

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

任何帮助将不胜感激！！谢谢，马特

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

如果您要添加此代码：

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

并将代码块的最后一行替换为对startRotation(); 的简单调用，然后当鼠标悬停/离开您的元素时，您可以调用stopRotation 和startRotation：

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

【讨论】：

实际上，无论出于何种原因，如果您将鼠标悬停在它上面（它会正确停止）.. 然后在鼠标移出时再次开始，但是一旦下一张幻灯片进入，它就会暂停，直到您悬停在打开和关闭再次..
已通过将 setTimeout 更改为 setInterval 进行修复。我很抱歉。

【解决方案2】：

不清楚您在没有看到 HTML 和更多代码的情况下尝试对三个 div 做什么，所以我认为一个基本示例可能会更好地帮助您 (demo)。

HTML

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

脚本

$(document).ready(function(){

 var indx = 0, loop, numberOfFeatures = 5;

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

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

})

【讨论】：

【解决方案3】：

稍微改变了一下，这就是我最终的做法。 `

 var animRun = false;
var rotateHover = false;

function startRotation() {

            rotateHover = false;
            ImageRotate();
        }

    function stopRotation() {
        rotateHover = true;
        clearTimeout();
    }

    function ImageRotate() {

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

    var CurrentFeature = "#container" + featureNumber;

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

    var featureNumber2 = featureNumber+1;
    if ( featureNumber == numberOfFeatures) {featureNumber2 = 1}
    var NewFeature = "#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};
    var OldFeature = "#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);
    };
};

【讨论】：