字体大小变化使 li 元素跳跃

Question

我一直在尝试解决我在使用网站导航栏时遇到的问题。我想在鼠标悬停时为文本添加动画以增加大小，但希望它是一个平滑的过渡而不是仅仅跳跃大小因此 jQuery 方法而不是调整 li:hover。

我遇到的问题是 jQuery 函数在悬停时使列表项 "jump"。是否有我忽略的简单解决方案或不同的方法来实现这一目标？

$(document).ready(function(){

 $('.nav li').hover(function() {
      $(this).stop().animate({ fontSize : '30px'}, 200);
 },
 function() {
      $(this).stop().animate({ fontSize : '26px'}, 200);
 });

});

.nav {
 background-color: #333;
  height: 50px;
  line-height: 50px;
}

.nav li {
  font-family: 'Impact';
 width: 15%;
 color: #EB1B1B;
 display: inline-block;
 font-size: 26px;
  position: relative;
}

.nav li:hover {
 color: #fefd05;
}

.sitemap {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.fixed {
  width: 100%;
 position: fixed;
 top: 0;
  background-color: #333;
  z-index: 1;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="nav">
 <ul class="sitemap">
  <a href="one.html"><li>One</li></a>
  <a href="two.html"><li>Two</li></a>
  <a href="three.html"><li>Three</li></a>
  <a href="four.html"><li>Four</li></a>
  <a href="five.html"><li>Five</li></a>
 </ul>
</div>

Example Fiddle here.

Answer 1

向 <li> 元素添加 vertical-align: bottom 规则应该可以解决您的问题。

字体大小变化使 li 元素跳跃

Font size change making li elements jump

jquery

font-size

jump-list