I have been trying to fix an issue I am experiencing with my sites navigation bar. I want to animate the text to increase in size when hovered over, but want it to be a smooth transition and not just jump in size hence the jQuery approach as opposed to adjusting the li:hover.
The issue that I'm having is the jQuery function makes the List Item "jump" when hovered over. Is there a simple solution or a different approach that I am overlooking to achieve this?
$(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>Adding a vertical-align: bottom rule to the <li> elements should fix your problem.