jquery在mouseover上停止圖像旋轉，在mouseout/hover上啓動

我已經構建了一個jQuery旋轉器來旋轉3個div並循環它們。我想將鼠標懸停功能添加到「凍結」當前div，然後再次在鼠標上重新開始。jquery在mouseover上停止圖像旋轉，在mouseout/hover上啓動

我曾經想過在函數的開始處設置一個變量爲false，並且當它位於當前幀上時將其設置爲true，但我已經讓自己感到困惑。

我也試過使用懸停功能，但使用進出處理程序時，我很困惑如何停止，重新啓動動畫。

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

任何幫助將不勝感激！謝謝，馬特

來源

2010-04-22 Matt Nathanson

變化的東西一點點，這裏就是我終於實現了它。 `

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

來源

2010-04-23 20:16:07

如果您要添加以下代碼：

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

來源

2010-04-22 23:32:14

實際上，無論出於何種原因，如果你在它懸停（停止正確）..然後再次啓動鼠標，但是那麼一旦下一張幻燈片進來，它的暫停，直到你懸停，然後再次關閉.. – 2010-04-23 15:34:14

通過將'setTimeout'更改爲'setInterval'來修復。我很抱歉。 – 2010-04-23 15:41:56

目前還不清楚你正在嘗試用三個div的做沒有看到HTML和更多的代碼，所以我認爲一個基本的例子可以幫助您更好地（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(); 
}); 

})

來源

2010-04-23 13:34:14 Mottie

jquery在mouseover上停止圖像旋轉，在mouseout/hover上啓動

回答

相關問題