字體大小更改使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規則應該可以解決您的問題。