ロールオーバーで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/