How can I fade in a DIV with jQuery on rollover?

Question

I've tried lots of code that I have found on this site, but none of it seems to work. I'm not very knowledgable on HTML and jQuery, so it's probably something really simple that I am doing wrong. Here is some sample code:

<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>

What may I be doing wrong?

Answer 1

There are already methods available for fading in ( fadeIn ) and out ( fadeOut ). This should get you going in the right direction:

<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> 

For the sake of the example, I just used a <div> to demonstrate the fade effect, but you can swap that for an image or another element.

Here's a jsFiddle: http://jsfiddle.net/CwQet/