jQuery .animate() не работает должным образом

Question

Я разрабатываю веб-сайт и для эффектов. Я наткнулся на приведенный ниже набор кода jquery для достижения изменения цвета текста с помощью анимации. Но это не работает, и я не уверен, что не так.

JSFIDDLE

Ниже приведен код, который я в настоящее время испытывает проблемы с:

JQuery:

$('.list-5 li a').hover(function() { 
    $(this).stop().animate({ color: '#fff' }) 
}, function() { 
    $(this).stop().animate({ color: '#0e1b23' }) 
}) 

HTML:

<div class="list-5"> 
    <ul> 
    <li> 
     <a href="#">Hello world</a> 
    </li> 
    </ul> 
    </div> 

Answer 1

#FFFF - недопустимый цвет. Используйте либо #FFF, либо #FFFFFF.

Кроме того, по умолчанию jQuery .animate не анимирует цвета. Вам нужно будет использовать jQuery UI для этого (или Color plugin).

• Demo с использованием цвета плагин: http://jsfiddle.net/FMTDp/13/
• Demo с использованием JQuery UI: http://jsfiddle.net/FMTDp/15/

Answer 2

Вы не можете оживить цвета!

.animate({ 
     color: '#ffff' 
    }); 

, если не добавить ссылку на JQuery UI.

Все анимированные свойства должны быть анимированы до одного числового значения, за исключением случаев, указанных ниже. большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовой функциональности jQuery (например, ширина, высота или левый могут быть анимированы, но фоновый цвет не может быть, если не используется плагин jQuery.Color()).

Working DEMO using jQuery UI

Answer 3

Вы должны использовать JQuery UI или JQuery плагин для анимации цвета. Вы также используете неправильный цветовой код, используйте #fff или #ffffff.

От animate:

Например, ширина, высота, или влево, можно анимировать, но цвет фона не может быть, если плагин jQuery.Color() не используется

Примечание: Проект jQuery UI расширяет метод .animate(), позволяя некоторые нечисловые стили, такие как цвета, которые нужно анимировать. Проект также включает механизмы для определения анимаций через классы CSS , а не отдельные атрибуты.