使用 jQuery 动画 lineHeight 的下拉菜单

Question

我们的想法是制作一个下拉菜单，首先所有菜单项都堆叠在顶部，悬停时它们会向下动画。

我通过将 line-height 设为 0 来做到这一点。悬停时将 lineHeight 设置为 35px。

问题是这也会将第一行向下移动，这有时会将鼠标定位到文本之外并使其再次跳起来。

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

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

有人有解决办法吗？

我的 Javascript 和 jQuery 技能有限，所以我尝试用我知道的东西来创造。

第一次尝试

HTML

<h2>
    <a>project one                <br></a>
    <a>number two                 <br></a>
    <a>this would be project three<br></a>
    <a>and number four            <br></a>
</h2>

CSS

h2 {
    left:10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:36px;
    font-weight:400;
    line-height:10px;
    position:absolute;
    top:-5px;
}

jQuery:

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

第二

HTML

<div id="menu">
<h2>
    <a>project one<br/>                                         </a>
    <span id="anim">
    <a>number two<br/>                                 </a>
    <a>this would be project three<br/>   </a>
    <a>and number four<br>                                     </a>
    </span>
</h2>
</div>

jQuery:

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

这里还有一个jsfiddle：

• 第一次尝试：http://jsfiddle.net/q85w4b2L/1/
• 第二次尝试：http://jsfiddle.net/zwxwLzp8/2/

Answer 1

我会使用动画最大高度而不是行高。此外，我会更改您的 html 结构，因为 h2 应该用于标题 - 而不是链接列表。

$(document).ready(function () {

    $("ul").hover(function () {
        $(this).children('li').animate({'max-height': 100}) // make the 100 larger than the tallest li
    }, function () {
        $(this).children('li').animate({'max-height': 0})
    });

});

ul {
    position:absolute;
    top:0;
    left:10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:36px;
    font-weight:400;
    list-style:none;
    padding:0; 
    margin:0;
}

li {
    padding:0;
    margin:0;
    overflow:visible;
    max-height:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
        <ul>
            <li><a>project one</a></li>
            <li><a>number two</a></li>
            <li><a>this would be project three</a></li>
            <li><a>and number four</a></li>      
        </ul>
    </div>

Answer 2

jQuery 已经有一个内置的方法来做这样的动画，它被恰当地命名为 .slideToggle()。考虑以下代码...

HTML：

<h2>Hover Over Me</h2>
<nav>
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
</nav>

CSS：

h2 {
    display:block;
    font-size:24px;}

nav {
    display:none;}

nav a {
    display:block;}

jQuery:

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

    $('nav').slideToggle();

});