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

Question

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

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

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

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