Question

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

我通过使行高为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应该用于标题 - 而不是链接列表。

＆＃13;

$(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})
    });

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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();

});

使用jQuery animate lineHeight下拉菜单

2 个答案: