jquery懸停導航按鈕，在另一個div上的fadein div

Question

有點卡在這個jquery上。

我的導航欄上方有一個橫幅，它是一個列表。理想情況下，當我將鼠標懸停在導航欄中的某個li上時，我想要一個「標題」滑入橫幅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將滑入查看關於「旗幟」 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中的.home_caption（正如這個所指的那樣）。