jQuery，懸停活動只有當頁面加載結束淡入淡出

Question

我是一個jQuery初學者！

我需要一些div在頁面加載時淡入淡出，我可以做到這一點。 我需要讓他們展示不同的延遲和時間，我可以做到。 當你懸停相對的div時，每個div都有一個淡入淡出的圖像，我可以做到。

問題是，懸停的圖像動畫，如果div的fadeIn沒有結束，仍然開始。

我想，如果用戶懸停div仍然與fade一起沒有任何反應。 如果您將一個完全顯示的div懸停，圖像將啓動淡入。

這裏是我的HTML

<div id="immagine1"> 
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/> 
</div> 
<div id="immagine2"> 
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/> 
</div> 

這裏是我的jQuery

$(window).load(function() { 

$('#immagine1').hide(); 
$('#immagine1').stop().fadeIn(1000); 
$('#immagine2').hide(); 
$('#immagine2').stop().delay(2500).fadeIn(2500); 
$('div').hover(
     function(){ $(this).find('img').fadeIn(1000); 
    }); 

    }); 

和IMG CSS

img{ 
display:none; 
} 

我如何 「禁用」 懸停效果，直到結束fadeIn在頁面加載？

謝謝！

This is the test page

Answer 1

我相信這會做你正在尋找的東西。基本上，你需要做的是等到<div>已完全淡入，然後再綁定圖像的懸停事件。您可以通過在callback中爲<div>淡入進行事件綁定來實現此目的。此外，因爲你只是做在hoverIn事件東西（而不是hoverOut），你可以使用.mouseenter（）代替.hover（）

下面是代碼：

$(function() { 
    $('div img').hide(); 
    $('#immagine1').hide().fadeIn(5000, function() { 
     $('div').mouseenter(function() { 
      $(this).find('img').fadeIn('1000'); 
     }); 
    }); 
}); 

而這裏的它的一個工作演示：http://jsfiddle.net/vYz3t/

Answer 2

的樣子，我不明白你的真正的問題，但試試這個：

$(window).load(function() { 
    $('#immagine1, #immagine2').hide(); 
    $('#immagine1').hover(
      function(){ 
       $(this).fadeIn(1000); 
      }, 
      function(){ 
       $(this).fadeOut(1000); 
      } 
    ); 
    $('#immagine2').hover(
      function(){ 
       $(this).fadeIn(1000); 
      }, 
      function(){ 
       $(this).fadeOut(1000); 
      } 
    ); 
}); 

或者採取jQuery hover docs

Answer 3

一看我不知道你在做什麼試圖實現，但也許你可以通過使用.queue()明確地將懸停動畫放在隊列末尾來獲得你想要的效果：

$('div').hover(function() { 
    $(this).queue(function() { 
    $(this).find('img').fadeIn(1000); 
    }); 
});​ 

淡入效果將在默認隊列（「fx」）中的掛起動畫完成後開始。這裏是a fiddle展示的概念;也許它會讓你指向正確的方向。