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”上，“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但不确定它是否适应我的需要 - 即“悬停”区域在“标题”区域之外。

感谢

Answer 1

如果您想使用您的代码，则需要输入

display: none;

在标题类中。

有一个很好的jQuery效果，允许您显示或隐藏元素。它被称为toggle。最终代码应该类似于：

$(document).ready(function(){

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

});

Answer 2

我认为将$(".home_caption", this)改为$(".home_caption")可能会解决这个问题。我没有在你的具体例子上测试它，所以可能还有其他问题，但是它正在#home中寻找.home_caption（如此所指）。

Answer 3

本教程可以帮助您。

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

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

jquery悬停导航按钮，另一个div上的fadein div

3 个答案: