jquery hover navigation button, fadein div на другом div

Question

немного застрял на этом jquery.

У меня есть баннер над моей навигационной панелью, которая является списком. В идеале, когда я нависаю над ли на навигационной панели, мне бы хотелось, чтобы надпись «caption» помещалась поверх div-баннера.

Я думаю, что-то вроде:

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

так, если я наведите курсор мыши на «дома», то «home_caption» 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}); 
     }); 

}); 

я посмотрел на https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm, но не уверен, что если его адаптации к моим потребностям - то есть «парить» область находится за пределами «заголовка» области.

благодаря

Answer 1

Этот учебник должен помочь вам.

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

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

Answer 2

Если вы хотите использовать свой код, то вам нужно поставить

display: none; 

в классах титров.

Приятный эффект jQuery, который позволяет вам отображать или скрывать элемент. Это называется toggle. Окончательный код должен выглядеть примерно так:

$(document).ready(function(){ 

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

}); 

Answer 3

Я думаю, что изменение $(".home_caption", this) просто $(".home_caption") может это исправить. Я не тестировал его на вашем конкретном примере, так что могут быть другие проблемы, но, поскольку он стоит, он ищет .home_caption в #home (как указано в этом).