jquery - jQuery 动画时导航栏向下移动

Question

过去十天我一直在学习 HTML/CSS/jQuery。我正在创建我的第一个网站，并尽可能多地尝试。

我为导航栏制作了动画。它改变了 color 并且 font-size 增加了 2px。 font-size 的增加导致导航栏的其余部分下降了几个像素。我该如何解决这个问题？

这是一个 jsFiddle of my project .

动画:

$(document).ready(function () {
    $('a').hover(function () {
        $(this).stop().animate({
            "color": "#FFA541",
            "font-size": "25px"
        }, 275);
    }, function () {
        $(this).stop().animate({
            "color": "white",
            "font-size": "23px"
        }, 275);
    });
});

Answer 1

.navigation ul li a {
    text-decoration: none;
    margin: .2em 1em;
    color: white;
    width: 100px;
    line-height:25px;
}

给a标签添加行高。将其设置为最高点。

这是对您的 fiddle 的更新: http://jsfiddle.net/Lhbys/1/