Javascript jQuery 动画颜色变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6967188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate color change
提问by wowpatrick
I'm trying to animate a link color change from the current color to an other color.
我正在尝试将链接颜色从当前颜色更改为其他颜色的动画。
$(window).load(function(){
$('.article-preview h1 a').hover(function(){
$(this).animate({
color: #ffffff
}, 1500);
});
});
For some reason it's not working. I'm using the jQuery color plugin.
由于某种原因，它不起作用。我正在使用jQuery 颜色插件。
回答by Baversjo
You need to wrap the hex triplet in a string, change this:
您需要将十六进制三元组包装在一个字符串中，将其更改为：
color: #ffffff
to this:
对此：
color: "#ffffff"
回答by jave.web
The basic problem is probably that you don't know jQuery's / JavaScript's notations,
writing #ffffffwould get you SyntaxError, because SharpSign+Lettersdoesn't mean anything in JS.
Quick Solution:You have to pass hexa-colors as strings: color: "#ffffff"
基本问题可能是你不知道 jQuery 的 / JavaScript 的符号，
写作#ffffff会让你得到SyntaxError，因为SharpSign+Letters在 JS 中没有任何意义。
快速解决方案：您必须将六色作为字符串传递：color: "#ffffff"
jQuery supports a few different notations of passed-object for .css()& .animate()methods,
let me guid you through them.
jQuery 为.css()&.animate()方法支持传递对象的几种不同表示法，
让我来指导您完成它们。
Property names / Keys
属性名称/键
(border, width,...) can be written in 3 ways:
(border, width,...) 可以用 3 种方式书写：
backgroundColor //DOM formatting
'backgroundColor' //DOM formatting BUT - passed as a STRING
'background-color' //CSS formatting - passed as a STRING
Property values / Values
属性值/值
(#ffffff, 0px, none, ... ) can be written in 3 ways
(#ffffff, 0px, none, ... ) 可以用 3 种方式编写
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' // - || -
You could rouglysay that everything except pixels is always passed as string
=> that means in quotes (single 'or double ") or you could of course pass a string variable
您可以粗略地说，除像素以外的所有内容始终作为字符串
=>传递，这意味着在引号中（单引号'或双引号"），或者您当然可以传递字符串变量
So the safest way for beginers would probably be to always use quote notations for both - keys && values.
因此，对于初学者来说，最安全的方法可能是始终对两个键和值都使用引号表示法。
...
...
Overall
总体
All this is actually using part of JSON - JavaScript Object Notation
所有这些实际上都是使用JSON 的一部分- JavaScript Object Notation
All of this is described in the jQuery's .css()method documentation
所有这些都在jQuery 的方法文档中进行了描述.css()
Beware of
提防
Some bugs in (older) Internet Explorers (see documentation of .css()and .animate()methods)
（旧的）Internet Explorer 中的一些错误（请参阅文档.css()和.animate()方法）
I did not show example of all string-passed possibilities, for example:
我没有展示所有字符串传递可能性的例子，例如：
As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.
从 jQuery 1.6 开始，.css() 接受类似于 .animate() 的相对值。相对值是一个以 += 或 -= 开头的字符串，用于增加或减少当前值。例如，如果元素的 padding-left 为 10px，.css("padding-left", "+=15") 将导致总 padding-left 为 25px。
JSON object has more valid values than numbers and strings - boolean, array, object, null...
JSON 对象具有比数字和字符串更多的有效值 - 布尔值、数组、对象、空值...
