jquery hover bouton de navigation, fadein div sur un autre div

Question

peu coincé sur cette jquery.

J'ai une bannière au-dessus de ma barre de navigation, qui est une liste. Idéalement, quand je survole un li dans la barre de navigation, je voudrais qu'une "légende" glisse sur le dessus de la bannière div.

Je suppose que quelque chose comme:

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

donc si je passe la souris sur « la maison », la « home_caption » DIV glissera pour voir au-dessus de « bannière » 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}); 
     }); 

}); 

je l'ai regardé https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm mais pas sûr si son adaptabilité à mes besoins - i.e. la zone « vol stationnaire » est en dehors de la zone « légende ».

grâce

Answer 1

Ce tutoriel devrait vous aider.

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

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

Answer 2

Si vous voulez utiliser votre code, alors vous devez mettre

display: none; 

dans les classes de sous-titres.

Il y a un joli effet jQuery qui vous permet d'afficher ou de masquer un élément. Ça s'appelle toggle. Code final devrait ressembler à:

$(document).ready(function(){ 

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

}); 

Answer 3

Je pense que le changement $(".home_caption", this) juste $(".home_caption") peut résoudre ce problème. Je ne l'ai pas testé sur votre exemple spécifique, donc il y a peut-être d'autres problèmes, mais en l'état, il recherche .home_caption dans #home (comme indiqué par ceci).