jQuery Анимация текста цвета при наведении

Используя следующий код, пытаюсь заставить цвет шрифта анимироваться при наведении, подобно тому, как у меня есть анимация цвета нижней границы. Изменение цвета border-bottom работает, но цвет шрифта просто не изменится. Полный пример можно увидеть здесь:http://www.buenolisto.com/alma, Любая помощь очень ценится. Я также уже вызываю пользовательский интерфейс jQuery с:https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js

jQuery("li.social").hover(function() {
jQuery(this).find("img").stop(true, true).animate({
    'marginTop': "-=20px"
}, 'fast');
}, function() {
jQuery(this).find("img").stop(true, true).animate({
    'marginTop': "+=20px"
}, 'fast');
})
jQuery("li.reservas").hover(function() {
jQuery(this).find("img").stop(true, true).fadeOut({
    'marginTop': "-=30px"
}, 'slow');
}, function() {
jQuery(this).find("img").stop(true, true).fadeIn({
    'marginTop': "+=30px"
}, 'slow');
})
jQuery("ul.menu li").hover(function() {
jQuery(this).find("a").stop(true, true).animate({
    'borderBottomColor': '#2E9ECE',
    'color': '2E9ECE'
}, 'slow');
}, function() {
jQuery(this).find("a").stop(true, true).animate({
    'borderBottomColor': '#FFDF85',
    'color': 'FFDF85'
}, 'slow');
})​

Ответы на вопрос(1)

Решение Вопроса

# около цветов css, так что вместо этого'color': '2E9ECE' использовать этот'color': '#2E9ECE', Возможно, вы также захотите поработать над своим стилем, я переписал ваше последнее наведение на что-то вроде этого:

$('ul.menu li a').hover(
    function() {
        // do this on hover
        $(this).animate({
            'borderBottomColor': '#2E9ECE',
            'color': '#2E9ECE'
        }, 'slow');
    }, 
    function() {
        // do this on hover out
        $(this).animate({
            'borderBottomColor': '#FFDF85',
            'color': '#FEFEFE'
        }, 'slow');
    }
);

который, на мой взгляд, более читабелен и короче. Взгляните на jQuery APIзависать а такжеоживлять

UPDATE: Я проверил, этот код работает (протестирован с новейшими версиями FireFox и Chrome):

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
<script type="text/javascript">                                         
    $(function() {
        $("a").hover(
            function() {
                $(this).animate({ color: "#00ff00" }, 'slow');
            },function() {
                $(this).animate({ color: "#ff0000" }, 'slow');
        });
    });
</script>                                                               
</head>                                                                 
<body>                                                                  
    <a href="#">aaa</a><br />
    <a href="#">bbb</a><br />
</body>                                                                 
</html>
 13 июн. 2012 г., 19:08
Я отредактировал свой пост, чтобы он соответствовал вашим цветам, это просто, просто зацикливайтесь на API.
 user144795813 июн. 2012 г., 18:19
Я попробовал этот код следующим образом и, похоже, у меня все еще есть проблемы. Цвета меняются, но не так, как я их отменяю. Я хотел бы, чтобы цвет шрифта анимировался в # 2E9ECE при наведении курсора и возвращался к #FEFEFE, когда не завис. Я настоящий новичок в этом, поэтому, пожалуйста, потерпите меня :)jQuery('ul.menu li a').hover(function() { jQuery(this).stop(true, true).animate({'borderBottomColor': '#2E9ECE','color': '#2E9ECE'}, 'slow'); }, function() { jQuery(this).stop(true, true).animate({'borderBottomColor': '#FFDF85','color': '#FEFEFE'}, 'slow'); } );
 14 июн. 2012 г., 17:15
@ user1447958 Так это работает? Мой ответ правильный?
 user144795815 июн. 2012 г., 12:54
Нет, это не сработало ... Поведение было все неправильно. Когда я в первый раз наведу курсор на элемент после загрузки страницы, ничего не произойдет. Затем, наведя курсор на элемент во второй раз, вы получите желаемый эффект. Также нарушилось мое правило CSS для текущего элемента меню. Я все еще хотел бы заставить это работать все же. Посмотрите на API, и он просто прошел через мою голову. :(
 user144795814 июн. 2012 г., 02:21
Проблема, с которой я столкнулся, была в первый раз, когда я наводил курсор на элемент, анимация не включалась ... но если бы я зависал над элементом во второй раз, анимация выполнялась. Тогда у меня была проблема с текущим пунктом меню, который также не отображал правильный цвет.

Ваш ответ на вопрос