如何使用jQuery爲文本鏈接設置動畫效果？

我對jQuery有點新鮮感，並且遇到了一些我嘗試實現的問題。如何使用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; 
}

來源

2010-03-30 Peter

添加.navlist a:visited聲明，設置.navlist a和.navlist a:hover之間文字顏色爲＃c4c4c4。

來源

2010-03-30 22:27:07 Pickle

您可能還需要將'.navlist a：hover'更改爲'.navlist a：hover，.navlist a：hover：visited'，這樣無論鏈接是否被訪問，懸停顏色都將始終有效。 ..但可能並非如此。 – 2010-03-30 22:42:19

您不需要另一個聲明，只需將'.navlist a {'轉換爲'.navlist a，.navlist a：visited {' – 2010-03-30 22:59:14

@Pickle我曾嘗試將顏色添加到.navlist a：visited，但它沒有以我想要的方式工作。它將訪問過的鏈接更改爲正確的顏色，但是當它在點擊後懸停在鏈接上時，懸停顏色不再顯示。 – Peter 2010-03-31 05:00:10

如何使用jQuery爲文本鏈接設置動畫效果？

回答

相關問題