如何使用jQuery动画文本链接?

时间:2010-03-30 22:24:18

标签: javascript jquery css animation

我对jQuery有些新手,我对我想要实现的东西有疑问。

我有一个垂直导航菜单,其中每个链接都会在悬停时通过更改颜色,增加字母间距以及在左侧添加边框来设置动画。

除了点击链接时,一切都按照我想要的方式工作。单击链接后,即使我将鼠标悬停在链接上,文本也会更改为不同的颜色并保持相同的颜色。

即使我点击链接后,我也希望将鼠标悬停的颜色保持不变。 我确信我错过了一些简单的东西,但我已经尝试了所有我知道的事情,没有运气。 任何建议都会有所帮助!

以下是我对动画的看法......

<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>

我的导航列表的css就在这里......

.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;
}

1 个答案:

答案 0 :(得分:0)

.navlist a:visited.navlist a之间添加.navlist a:hover声明,将文字颜色设置为#c4c4c4。