0

很少卡在这个 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但不确定它是否适合我的需求 - 即“悬停”区域在“标题”之外区域。

谢谢

4

3 回答 3

0

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

display: none;

在字幕类中。

有一个很好的 jQuery 效果，可以让您显示或隐藏元素。它被称为切换。最终代码应类似于：

$(document).ready(function(){

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

});
于 2009-11-25T15:11:30.587 回答
0

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

于 2009-11-25T15:11:48.850 回答
0

本教程应该可以帮助您。

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

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

于 2009-11-25T15:42:37.387 回答