字体大小变化使 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>

示例小提琴在这里。

Answer 1

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