Как анимировать текстовые ссылки с помощью jQuery? - PullRequest
Новая
       12

Как анимировать текстовые ссылки с помощью jQuery?

1 голос
/ 31 марта 2010

Я немного новичок в 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 голосов
/ 31 марта 2010

Добавьте объявление .navlist a:visited между .navlist a и .navlist a:hover, которое устанавливает цвет текста на # c4c4c4.

...