jquery悬停导航按钮，在另一个div上淡入div答案

【问题标题】：jquery hover navigation button, fadein div on another divjquery悬停导航按钮，在另一个div上淡入div
【发布时间】：2009-11-25 23:42:37
【问题描述】：

这个 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”上，“home_caption”DIV 将滑入以查看“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});
        });

});

我查看了https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm，但不确定它是否适合我的需求 - 即“悬停”区域在“标题”区域之外。

谢谢

【问题讨论】：

标签： jquery hover caption

【解决方案1】：

本教程应该可以帮助您。

参见 5a： http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

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

【讨论】：

抱歉延迟响应，眼睛看起来像我所追求的，应该能够适应它。谢谢

【解决方案2】：

如果你想使用你的代码那么你需要把

display: none;

在字幕类中。

有一个很好的 jQuery 效果，可以让您显示或隐藏元素。它被称为toggle。最终代码应如下所示：

$(document).ready(function(){

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

});

【讨论】：

【解决方案3】：

我认为将 $(".home_caption", this) 更改为 $(".home_caption") 可能会解决此问题。我没有在您的具体示例中对其进行测试，因此可能存在其他问题，但就目前而言，它正在 #home 中搜索 .home_caption （如此所指）。

【讨论】：