How do I animate text links in jquery?
- by Peter
I am somewhat new to jquery and I have a problem with something I am trying to implement using jquery.
I have a vertical navigation menu where each link animates on hover by changing color, increasing letter spacing, and adding a border on the left.
Everything is working the way I want it to except for when I click on the link. After I click on the link, the text changes to a different color and remains that same color even when I hover over the link.
I am wanting to make it to where the color change on hover remains intact even after I click the link.
I'm sure I am missing something simple, but I have tried everything I know to do with no luck.
Any suggestions would be helpful!
Here is what I have for the animation...
<script type="text/javascript">
$(document).ready(function(){
$("ul.navlist li a").hover(function(){
$(this).stop()
.animate({paddingLeft: '10px',letterSpacing: '2px',borderWidth:'20px'},{queue:false,easing:'easeInQuad'},50)
},
function(){
$(this).stop()
.animate({paddingLeft: '0px', letterSpacing: '0px',borderWidth:'0px'},{queue:false,easing:'easeOutQuad'},50)
});
});
</script>
My css for the navigation list is here...
.navlist {
list-style: none;
}
.navlist a {
border-left-color: #555555;
border-left-style: solid;
border-left-width: 0px;
color: #c4c4c4;
}
.navlist a:hover {
border-left-color: #555555;
border-left-style: solid;
color: #555555;
}
