Check out my JSFiddle demonstration here: http://jsfiddle.net/nv78t/
I'm facing an issue where I want all list items to have a consistent width of 150px, but when I set it, the animation switches from left to right, which is not the desired effect. Additionally, upon page load, the links have a specific margin space between them, but then they seem to jump to a different space. I want them to maintain their initial position and only adjust their width uniformly. What am I missing in my implementation? I've tried various tweaks without success.
Here's the corresponding code:
The HTML structure:
<div id="leftcolumn">
<ul id="navigation">
<li><a href="#" id="nav1" class="nav">Main</a>
</li>
<li><a href="#" id="nav2" class="nav">Double Rainbow</a>
</li>
<li><a href="#" id="nav3" class="nav">Monochrome Rainbow</a>
</li>
</ul>
</div>
The CSS styling:
#leftcolumn {
float: left;
width: 300px;
margin: 5px;
font-family: Calibri;
}
#leftcolumn ul {
list-style: none;
text-align: right;
padding: 10px;
float: right;
/*width: 150px;*/
}
#leftcolumn li {
margin-bottom: 25px;
display: block;
/*width: 150px;*/
}
#leftcolumn a:link {
text-decoration: none;
color: white;
}
#leftcolumn a:visited {
color: white;
}
#nav1 {
background-color: #FF2300;
padding: 7px;
}
#nav2 {
background-color: #FF9A00;
padding: 7px;
}
#nav3 {
background-color: #FFE800;
padding: 7px;
}
The JQuery script:
$(".nav").hover(function () {
$(this).animate({
width: "250px"
});
}, function () {
$(this).animate({
width: "150px"
});
});