從初始化jQuery的延遲懸停事件

我有一個標題，需要延遲一段時間頁面加載，然後淡出。 It can be tested here。我還添加代碼：從初始化jQuery的延遲懸停事件

HTML

<header id="main-header"> 
    <div id="inner"></div> 
</header>

CSS

#main-header {height: 70px;} 
#inner {height: 70px; background: red;}

的JavaScript

$(function() { 
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500); 
    $('#main-header').hover(
    function() {$('#inner').stop().animate({"opacity": "1"}, 1000);}, 
    function() {$('#inner').stop().animate({"opacity": "0"}, 1500);} 
); 
});

當C ursor懸停在該區域，它將會淡入。

如果用戶等待初始延遲/淡出完成後，所有內容都完美無缺地工作，但在初始延遲之前光標懸停在標題上時出現問題/淡出完成。請參閱上面的鏈接。

我想我需要延遲懸停從初始化以某種方式，在這種情況下，2300ms ..但如果任何人有更好的解決方案，我將不勝感激。謝謝！

來源

2012-07-12 user1521516

insertusernamehere在評論他的回答留下了很好的點。它很可能不適用於IE7或8，因爲它們不支持'

'標籤。據我所知，Chrome，Firefox和IE 9都可以工作。 – 2012-07-12 17:41:15

這應該做的伎倆，因爲它可以防止初始淡出射擊，當用戶在移動中的標題開頭：

$(function() { 

    var tictac  = setTimeout(function() { $('#inner').animate({"opacity": "0"}, 1500); }, 2300) 

    $('#main-header').hover(
     function() { 
      clearTimeout(tictac); 
      $('#inner').stop().animate({"opacity": "1"}, 1000); 
     }, 
     function() { $('#inner').stop().animate({"opacity": "0"}, 1500);} 
    ); 

});

而作爲一個註釋：最初的演示將不工作IE < 9因爲它使用HTML5標籤。

來源

2012-07-12 17:27:29 insertusernamehere

這沒有什麼區別。 – 2012-07-12 17:28:26

使用初始腳本，無論用戶是否懸停標題，它都會開始淡出。使用這個標題時，當用戶在初始淡出之前移過標題時。但是，也許我讓你問題錯了？ – insertusernamehere 2012-07-12 17:31:55

他粘貼的初始腳本在Chrome，Firefox和IE9中爲我工作，但在IE7或8中無法使用。您的代碼無法在IE7或8中修復它。 – 2012-07-12 17:33:19

您正在使用IE9之前的IE中未提供的<header>標籤。這是您的腳本在IE9之前無法運行的原因。據我所知，它適用於目前狀態下的Chrome，Firefox和IE9。

HTML：

<div id="main-header"> 
    <div id="inner"></div> 
</div>

JS：

$(function() { 
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500); 
    $('#main-header').hover(
     function() {$('#inner').stop().animate({"opacity": "1"}, 1000);}, 
     function() {$('#inner').stop().animate({"opacity": "0"}, 1500);} 
    ); 
});

Live DEMO

來源

2012-07-12 17:47:30

從初始化jQuery的延遲懸停事件

回答

相關問題