Question

我有一个水平导航栏，我正在用于学校项目的网站。我的JS动画我的导航列表项目，但不是我想要的方式。它将高度添加到底部，我想将其添加到顶部。我尝试过位置：绝对但是当我这样做时它完全弄乱了我的导航。我只有这个小提琴的导航栏，但如果你需要更多，我可以提供它。这是我的代码：http://jsfiddle.net/ajcherup/sE7Ez/

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

Answer 1

在动画期间，当您添加高度时，也会添加相应数量的负上边距。通过这种方式，'height'将添加到底部，但整个事物将向上移动，使其看起来像高度被添加到顶部......

此处更新了小提琴：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'
    });

});

});

我的导航栏动画有问题

1 个答案: