JQuery анимировать изменение цвета

Question

Я пытаюсь анимировать изменение цвета ссылки с текущего цвета на другой.

$(window).load(function(){
    $('.article-preview h1 a').hover(function(){
        $(this).animate({
            color: #ffffff
        }, 1500);
    });
});

По какой-то причине это не работает. Я использую плагин jQuery color .

Answer 1

Вам необходимо заключить шестнадцатеричный триплет в строку, измените это:

color: #ffffff

на следующее:

color: "#ffffff"

Answer 2

Основная проблема, вероятно, в том, что вы не знаете нотации jQuery / JavaScript,
запись #ffffff даст вам SyntaxError , потому что SharpSign + Letters ничего не значит в JS.
Быстрое решение: Вы должны передать гекса-цвета в виде строк: color: "#ffffff"

jQuery поддерживает несколько различных обозначений переданного объекта для методов .css() & .animate(),
позвольте мне провести вас через них.

Имена / Ключи

(рамка, ширина, ...) можно записать тремя способами:

backgroundColor    //DOM formatting
'backgroundColor'  //DOM formatting BUT - passed as a STRING
'background-color' //CSS formatting - passed as a STRING

Значения свойства / Значения

(# ffffff, 0px, none, ...) можно записать тремя способами

0         // 'pure' number - Integer (useful when pre-calculating pixels)
20.5      //               - Float
'0'       //  number BUT passed as STRING - Integer
'20.5'    //                              - Float
'0px'     //  string
'#ffffff' //  - || -
'auto'    //  - || -

Вы могли бы грубо сказать, что все, кроме пикселей, всегда передается как строка
=> это означает, что в кавычках (одинарном ' или двойном ") или, конечно, вы можете передать строковую переменную

Таким образом, самый безопасный способ для начинающих, вероятно, состоит в том, чтобы всегда использовать кавычки для обоих ключей и значений.

...

В целом

Все это на самом деле использует часть JSON - JavaScript Object Notation

Все это описано в документации по методу jQuery .css()

Остерегайтесь

Некоторые ошибки в (старых) Internet Explorer (см. Документацию методов .css() и .animate())

Я не показал пример всех возможностей, переданных через строку, например:

Начиная с jQuery 1.6, .css () принимает относительные значения, аналогичные .animate (). Относительными значениями являются строки, начинающиеся с + = или - = до увеличить или уменьшить текущее значение. Например, если элемент padding-left был 10px, .css ("padding-left", "+ = 15") приведет к общий отступ слева 25px.

Объект JSON имеет больше допустимых значений, чем числа и строки - логическое значение, массив, объект, ноль ...