使用jQuery设置线宽动画的下拉菜单

其想法是制作一个下拉菜单，首先所有菜单项都堆叠在顶部，悬停时它们将向下设置动画

我通过使线高度为0来实现这一点。悬停时，将线宽设置为35px

问题是，这也会将第一行向下移动，这有时会将鼠标定位在文本之外，使其再次向上跳跃

我尝试将第一个项目保留在动画之外，但这会导致重叠

而且在搬进来搬出去几次之后，我停止了工作一秒钟，我真的不知道为什么

有人有解决办法吗

我的Javascript和jQuery技能是有限的，所以我尝试对我所知道的东西进行创新

初试

HTML

jQuery：

$("h2").hover(function () {
    $(this).filter(':not(:animated)').animate({
        lineHeight: '35px'
    });
}, function () {
    $(this).animate({
        lineHeight: '0px'
    });
});

$("h2").hover(function () {
    $("#anim").filter(':not(:animated)').animate({
        lineHeight: '35px'
    });
}, function () {
    $("#anim").animate({
        lineHeight: '0px'
    });
});

$('h2').hover(function(){

    $('nav').slideToggle();

});

第二

HTML

这里还有一个JSFIDLE：

• 第一次尝试：
• 第二次尝试：

---

我会选择设置最大高度动画，而不是线条高度动画。此外，我还将更改您的html结构，因为h2应该用于标题，而不是链接列表

$（文档）.ready（函数（）{
$（“ul”）.hover（函数（）{
$（this）.children（'li'）.animate（{'max-height'：100}）//使100大于最高的li
}，函数（）{
$（this）.children（'li'）.animate（{'max-height'：0}）
});
});
ul{
位置：绝对位置；
排名：0；
左：10px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：36px；
字体大小：400；
列表样式：无；
填充：0；
保证金：0；
}
李{
填充：0；
保证金：0；
溢出：可见；
最大高度：0；
}


项目一
二号
这将是项目三
第四名

jQuery已经有了一个内置的方法来制作这样的动画，它的名字很贴切。slideToggle（）。考虑下面的代码…

HTML:

jQuery：

$("h2").hover(function () {
    $(this).filter(':not(:animated)').animate({
        lineHeight: '35px'
    });
}, function () {
    $(this).animate({
        lineHeight: '0px'
    });
});

$("h2").hover(function () {
    $("#anim").filter(':not(:animated)').animate({
        lineHeight: '35px'
    });
}, function () {
    $("#anim").animate({
        lineHeight: '0px'
    });
});

$('h2').hover(function(){

    $('nav').slideToggle();

});

这是可行的，它唯一没有做的就是将所有项目显示在彼此的顶部。也许我没有在我的问题中阐述它。因此，菜单项在折叠时不应该隐藏，它们应该相互重叠。太好了！非常感谢！我尝试了滑动切换，但它隐藏了折叠时的所有菜单项，我想坐在彼此的顶部，而所有的都是可见的。就像我的例子中的a一样。
h2 {
    display:block;
    font-size:24px;}

nav {
    display:none;}

nav a {
    display:block;}

$('h2').hover(function(){

    $('nav').slideToggle();

});