我該如何使用jQuery在滾動時淡入DIV？

Question

我已經嘗試了很多代碼，我發現在這個網站上，但似乎沒有任何工作。我對HTML和jQuery不是很瞭解，所以它可能很簡單，我做錯了。以下是一些示例代碼：

<script type="text/javascript"> 
    $('#Pic').hover(function(){ 
    $('#HomeRoll', this).stop().animate({ 
     opacity: 1 
     }, 250); 
    }, function() { 
    $('#HomeRoll', this).stop().animate({ 
     opacity:0 
     }, 250); 
}) 
</script> 

<div id="Nav"> 
    <a href="home.html" id="HomeLink"><img id="Pic" src="images/house_active.png" style="top: 18px; left:26px; position: relative" /></a> 
    <div id="HomeRoll">Home</div> 
    <br> 
    <img id="Pic" src="images/appicon.png" style="top: 36.5px; left:26px; position: relative" /><br> 
    <img src="images/contacticon.png" width="70px" height:"75px" style="top: 58px; left:28px; position: relative" /> 
</div> 

我在做什麼錯了？

Answer 1

已經有方法可用於淡入（fadeIn）和出（fadeOut）。這應該讓你在正確的方向前進：

<script type="text/javascript"> 
    $(function() { 
     $("#HomeRoll").hover(
      function() { 
       $("#fadeRoll").fadeIn("slow"); 
      }, 
      function() { 
       $("#fadeRoll").fadeOut("slow"); 
      } 
     ); 
    }); 
</script> 

<div id="Nav"> 
    <a href="home.html" id="HomeLink"></a> 
    <div id="HomeRoll">Home</div> 
    <div id="fadeRoll" style="display:none;">Fade Me!</div> 
</div> 

對於這個例子的目的，我只是用一個<div>證實淡入淡出的效果，但你可以交換對於圖像或其他元素。

這裏是一個jsFiddle：http://jsfiddle.net/CwQet/