0

好的，我有一个内联按钮列表。 

<ul id="nav">
   <li class="home"><a href="#">Menu Item</a></li>
   <li class="contact"><a href="#">Menu Item</a></li>
   <li class="about"><a href="#">Menu Item</a></li>
</ul>

.home{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line.png);
background-repeat:no-repeat;
height:34px;
width:134px;
}
.home_hover{
position:absolute;
bottom:0;
background-image:url(../img/menu/single_line_over.png);
background-repeat:no-repeat;
height:70px;
width:134px;
}

$(document).ready(function(){
 $("#nav .home").mouseover(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    }).mouseout(function(){
        $(this).toggleClass("home_hover").slideToggle("slow");
        return false;
    });
});

每个菜单项都有一个背景图像，然后当它悬停时，背景图像被一个更高的图像替换。最终，我正在尝试构建一个简单的菜单，在鼠标悬停时菜单项似乎向上滑动。但实际上Jquery 可以用slideToggle 为toggleClass 设置动画。问题是当前代码的行为不正确。

它上下跳跃，因为文本在移动。我对 Jquery 很陌生，因此非常感谢任何帮助。我还在http://gasworks.ravennainteractive.com/result/上加载了这个

谢谢

4

1 回答 1

0

试试这个（演示）：

CSS：

#header{
    height:100px;
}

#nav{
    height:34px;
    position:relative;
}

.home{
    position:absolute;
    bottom:0;
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line.png);
    background-repeat:no-repeat;
    height:34px;
    width:134px;
}

.home_hover{
    background-image:url(http://gasworks.ravennainteractive.com/result/img/menu/single_line_over.png);
}

脚本

$(document).ready(function(){
    $("#nav li").mouseover(function(){
        $(this).addClass('home_hover').stop().animate({ height: '70px'},'slow');

    }).mouseout(function(){
        $(this).stop().animate({ height: '34px'},'slow', function(){  
            $(this).removeClass('home_hover');
        })

    });
});
于 2010-06-18T00:26:39.223 回答