如何使用 jQuery 为文本链接设置动画？答案

【问题标题】：How do I animate text links using jQuery?如何使用 jQuery 为文本链接设置动画？
【发布时间】：2011-02-02 16:45:19
【问题描述】：

我对 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;
}

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

在.navlist a 和.navlist a:hover 之间添加一个.navlist a:visited 声明，将文本颜色设置为#c4c4c4。

【讨论】：

您可能还需要将.navlist a:hover 更改为.navlist a:hover, .navlist a:hover:visited，这样无论链接是否被访问，悬停颜色都将始终有效……但情况可能并非如此。
你不需要另外声明，只需将.navlist a {改为.navlist a, .navlist a:visited {
@Pickle 我曾尝试将颜色添加到 .navlist a:visited 但它没有按照我想要的方式工作。它将访问的链接更改为正确的悬停颜色，但是当我在单击链接后将鼠标悬停在链接上时，悬停颜色将不再显示。
@Matt Huggins 添加 .navlist a:hover:visited 效果很好！非常感谢！
@Peter - 如果他们对您有帮助，请不要忘记给答案和 cmets 打分，这样有相同问题的其他人就会知道哪些信息是有用的。另外，如果对您有用，请务必单击 Pickle 答案上的复选标记！