A fantastic code snippet can be found at this link for creating an animated navigation bar. The only thing left on my wishlist is for the slider to reset to its original position if a tab is not selected. Currently, it remains static regardless of selection.
HTML
<div id="slider"></div>
<div id="red" class="item"></div>
<div id="blue" class="item"></div>
<div id="yellow" class="item"></div>
<div id="green" class="item"></div>
CSS
div {
display: inline-block;
float:left;
}
#red {
background-color:#FF0000;
height:100px;
width:100px;
}
#blue {
background-color:#0000FF;
height:100px;
width:200px;
}
#yellow {
background-color:#E2BE22;
height:100px;
width:50px;
}
#green {
background-color:#008800;
height:100px;
width:170px;
}
#slider{
background-color:#6FF;
height:10px;
width:100px;
position: absolute;
left: 0;
top: 0;
}
SCRIPT
$(document).ready(function(){
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function(){
$("#slider").stop(); $("#slider").animate({"left":$(this).position().left+"px","width":$(this).width()+"px"},500);
});
});
Attempted Solution
$("#slider").delay(3000).animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);