setTimeout與jQuery.hover（）重疊

我已經得到了一個效果，我希望在頁面加載後觸發一秒，然後每隔3秒（重複）觸發一次。當用戶將鼠標懸停在某個元素上時（#hover），效果暫停（暫時）。當它們停在它上面時，效果會在2秒後恢復。setTimeout與jQuery.hover（）重疊

我在疊加聲音和動畫方面遇到了很多麻煩，特別是當我將鼠標懸停並快速停留在元素上時。我的代碼有什麼問題？（Fiddle）

var test; 
function hoverTest(arg) { 
    if (arg == 'stop') { 
    clearTimeout(test); 
    } 
    if (arg == 'start') { 
    playSound(); 
    $('#hover').transition({ 
     opacity: 0, 
     duration: 1000, 
     complete: function() { 
     $('#hover').transition({ 
      opacity: 1, 
      duration: 1000, 
      complete: function() { 
      test = setTimeout(function() { hoverTest('start'); }, 3000); 
      } 
     }); 
     } 
    }); 
    } 
} 

$('#hover').hover(function() { 
    hoverTest('stop'); 
}, function() { 
    setTimeout(function() { 
    hoverTest('start'); 
    }, 2000); 
}); 

function playSound() { 
    var sound = new Audio('sound.mp3'); 
    sound.play(); 
} 

setTimeout(function() { 
    hoverTest('start'); 
}, 1000);

來源

2014-01-20 daveycroqet

你可以創建一個演示提琴嗎？ –

現在用小提琴更新。 – daveycroqet

複製粘貼此文件並運行該HTML文件。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<style> 
    #hover { 
     width: 100px; 
     height: 100px; 
     background: red; 
    } 
</style> 
<div id="hover"></div> 

<script type="text/javascript"> 
var interval = null; 
var hoverTest = function(method){ 
    playSound(); 
    $("#hover").fadeOut(1000, function() { 
     $(this).fadeIn(1000); 
    }); 

} 
var playSound =function() { 
    var sound = new Audio('http://www.sounddogs.com/previews/25/mp3/306470_SOUNDDOGS__an.mp3'); 
    sound.play(); 
} 

$(document).ready(function(){ 
    interval = setInterval('hoverTest()',3000); 
    $("#hover").mouseenter(function(){ 
     clearInterval(interval); 
    }).mouseleave(function(){ 
     interval = setInterval('hoverTest()',3000); 
    }) 
}) 

</script>

來源

2014-01-20 08:00:24

對不起，這不起作用：http://jsfiddle.net/uxbmu/9/ – daveycroqet

對不起，我沒有意識到你正在使用懸停方法。你需要使用像這樣的mouseenter和mouseleave方法http://jsfiddle.net/uxbmu/10/ –

這仍然不起作用。進入並離開紅色方塊 - 它會迅速地喵喵叫。就我所知，hover（）與mouseenter和mouseleave相同。（雖然我可能是錯的） – daveycroqet

嘗試這種情況：（清除起動前，定時器）

$('#hover').hover(function() { 
    hoverTest('stop'); 
}, function() { 
    clearTimeout(test); 
    setTimeout(function() { 
    hoverTest('start'); 
    }, 2000); 
});

來源

2014-01-20 08:05:22

對不起，這並沒有工作：http://jsfiddle.net/uxbmu/8/ – daveycroqet

嘗試增加「clearTimeout（測試）;」 hoverTest函數中的第一件事。例如：

var test; 
function hoverTest(arg) { 
    clearTimeout(test); 
    if (arg == 'stop') { 
    clearTimeout(test); 
    } 
    if (arg == 'start') { 
    playSound(); 
    $('#hover').transition({ 
     opacity: 0, 
     duration: 1000, 
     complete: function() { 
     $('#hover').transition({ 
      opacity: 1, 
      duration: 1000, 
      complete: function() { 
      test = setTimeout(function() { hoverTest('start'); }, 3000); 
      } 
     }); 
     } 
    }); 
    } 
}

來源

2014-01-20 08:27:52 Minciu

沒有。仍然沒有運氣。 http://jsfiddle.net/uxbmu/11/ – daveycroqet

setTimeout與jQuery.hover（）重疊

回答

相關問題