我的導航欄動畫出現問題

Question

我有一個水平導航欄，用於學校項目的網站。 我的JS對我的導航列表項設置了動畫，但不是我希望的方式。 它會將高度增加到底部，我想將其增加到頂部。 我已經嘗試了position：absolute，但是當我這樣做時，它完全弄亂了我的資產凈值。 我在此提琴上只有導航欄，但是如果您需要更多，我可以提供。 這是我的代碼： http : //jsfiddle.net/ajcherup/sE7Ez/

$(document).ready(function () {
    $('li').mouseenter(function () {
        $(this).animate({
            height: '+=20px'
        });
    });
    $('li').mouseleave(function () {
        $(this).animate({
            height: '-=20px'
        });
    });
});

Answer 1

在動畫過程中，當您添加高度時，還要添加相應數量的負頂部邊距。 這樣，“高度” 將被添加到底部，但整個過程將向上移動，使其看起來像高度被添加到頂部。

在這里更新小提琴： http : //jsfiddle.net/moonspace/sE7Ez/2/

$(document).ready(function () {
$('li').mouseenter(function () {
    $(this).animate({
        height: '+=20px',
        marginTop: '-20px'
    });


});
$('li').mouseleave(function () {
    $(this).animate({
        height: '-=20px',
        marginTop: '+20px'
    });

});

});