フォントサイズの変更li要素のジャンプをジャンプ

Question

私は自分のサイトのナビゲーションバーで発生している問題を解決しようとしています。私は上に乗ったときにサイズが大きくなるようにテキストをアニメーション化したいが、それは滑らかな遷移であり、サイズのジャンプだけでなく、li：hoverの調整とは対照的にjQueryのアプローチであることが望ましい。

私が持っている問題は、jQuery関数が、リストアイテムを上に乗せたときに「ジャンプ」することです。私はこれを達成するために見落としている簡単な解決策か別のアプローチがありますか？あなたの問題を解決する必要があります<li>要素にvertical-align: bottomルールを追加する

$(document).ready(function(){ 
 

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

 
});

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

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

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

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

 
.fixed { 
 
    width: 100%; 
 
\t position: fixed; 
 
\t 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"> 
 
\t <ul class="sitemap"> 
 
\t \t <a href="one.html"><li>One</li></a> 
 
\t \t <a href="two.html"><li>Two</li></a> 
 
\t \t <a href="three.html"><li>Three</li></a> 
 
\t \t <a href="four.html"><li>Four</li></a> 
 
\t \t <a href="five.html"><li>Five</li></a> 
 
\t </ul> 
 
</div>

Example Fiddle here.

Answer 1

。