jquery hover navigation button, fadein div on another div

Question

Hi

little stuck on this jquery.

I have a banner above my nav bar, which is a list. Ideally, when I hover over a li in the navbar, I would like a "caption" to slide in on top of the banner div.

I guess something like:

<div id="banner">
<div class="home_caption">This is Home!</div>
<div class="about_caption">This is About!</div>
</div>

<div id="navbar">
  <ul>
    <li id="home"><a href="#">Home</a></li> 
    <li id="about"><a href="#">About</a></li>
  </ul>
</div>

so if i hover over "home", the "home_caption" DIV will slide in to view on top of "banner" div.

jquery:

$(document).ready(function(){
     $('#home').hover(function(){
      $(".home_caption", this).stop().animate({top:'160px'},{queue:false,duration:160});
     }, function() {
      $(".home_caption", this).stop().animate({top:'260px'},{queue:false,duration:160});
     });

});

i have looked at https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm but not sure if its adaptable to my needs - i.e the "hover" area is outside of the "caption" area.

thanks

Answer 1

If you want to use your code then you need to put

display: none;

in the caption classes.

There's a nice jQuery effect that allows you to show or hide an element. It's called toggle. Final code should look something like:

$(document).ready(function(){

    $('#home').hover(function(){
     $(".home_caption").toggle(100);  
    });

});

Answer 2

I think changing $(".home_caption", this) to just $(".home_caption") may fix this. I haven't tested it on your specific example, so there may be other problems, but as it stands it is searching for .home_caption within #home (as referred to by this).

Answer 3

This tutorial should help you out.

See 5a: http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

http://www.webdesignerwall.com/demo/jquery/animated-hover1.html