jQuery在鼠标悬停时停止图像旋转，在鼠标悬停/悬停时开始 [英] jquery stop image rotation on mouseover, start on mouseout / hover

问题描述

我已经构建了一个jQuery旋转器来旋转3个div并循环它们.我想在鼠标悬停时添加功能以冻结"当前的div，然后在鼠标悬停时再次开始.

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.

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

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

推荐答案

稍微改变了一些内容，这就是我最终做的事情. `

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

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

这篇关于jQuery在鼠标悬停时停止图像旋转，在鼠标悬停/悬停时开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！