为什么这行得通？（jQuery）[关闭]答案

【问题标题】：Why does this work? (JQuery) [closed]为什么这行得通？（jQuery）[关闭]
【发布时间】：2014-12-02 10:50:37
【问题描述】：

这行得通：

$('div.hg_logo').hover(
    function(){$(this).animate({
        backgroundColor: 'rgba(31, 197, 78, 0.75)'
    }, 1200)},
    function(){$(this).animate({
        backgroundColor: 'white'
    }, 1200)}
);

但鉴于我对 CSS 和 JS 的了解，它不应该！

1 'rgba(31, 197, 78, 0.75)' 不需要引号。
2 backgroundColor 应该是背景色。
3 分号应在颜色后使用。
以 'this' 为目标的内部函数后应使用 4 个分号。

据我了解，以上四点是正确的 CSS 和 JS - 但其中任何一点都会破坏这段代码。

它是 $().animate 的一个怪癖吗？它有可能被改变吗？还是我应该只死记硬背？

【问题讨论】：

你所有的 4 点都错了。没错 - 他们每个人
您似乎混淆了 CSS 语法和 jQuery/javascript 语法。这是两个非常不同的事情。尝试阅读 jQuery 的 animate 函数的文档。不要气馁！
1, 2 & 3：您在 JavaScript 中设置 CSS 属性，因此您不会像在 CSS 文件中那样编写它。 4：分号是可选的——在这两种情况下，1200); 之后都是有效的分号。
阅读 jQuery API 文档！

标签： javascript jquery css

【解决方案1】：

没有。它是一个 CSS 属性，作为文字字符串传递，以便 jQuery 将其解释为 CSS 属性。
没有。 CSS 属性转换为CamelCase when used in JS。尽管 jQuery 也可以以连字符形式使用它们，但您的示例的作者选择了驼峰式，因此不需要引用它们。（出于可读性的原因。）
没有。 CSS 中的分号用于分隔多个规则。最后一条规则不需要以分号结尾 #foo { color: white } 在 CSS 中是完全合法的。
没有。 Semicolons in JS indicate a logical line ending，仅此而已。此外，它们是可选的，如果有一个物理行结尾（即像\n 这样的换行符）。

【讨论】：

好吧，对于2，; 的 CSS 语义无论如何都无关紧要。这里设置的是样式属性，这些值中没有分号。
我认为 4 可能是在谈论每个匿名函数中 .animate() 调用之后的隐含分号。
另外，2: jQuery supports hyphen-separated CSS properties 在 setter 和 getter 中，虽然 camelCase 样式允许键不加引号。
@cmbuckley 是的，4 是在谈论.animate() 后面的隐含分号啊，回到我第一次学习的美好时光。

【解决方案2】：

1 'rgba(31, 197, 78, 0.75)' 不需要引号。

是的，应该。它是一个文本字符串，而不是一个值。这是因为您使用的是 JS，而不是 CSS。引号之间的任何内容都用作 CSS。 JS 不在乎你在里面放了什么，它也可能是 'pancake' （显然它不会像 CSS 那样做任何事情）。

2 backgroundColor 应该是背景色。

不，- 在 JS 中表示“减号”。它已经用于计算。在 CSS 中是 background-color，在 jQuery 中是 backgroundColor。没有理由让它完全相同，因为这不是一个字面上作为 CSS 插入的字符串（因为它周围没有引号）。

颜色后应使用3个分号。

分号是 jQuery 添加的。没有必要使用'rgba(31, 197, 78, 0.75);'之类的东西。

针对“this”的内部函数后应使用4个分号。

这样做确实更一致，但不需要它，因为包含该函数的块中没有代码行。通常块中最后一行代码后不需要分号（块一般用{和}封装）。

它是 $().animate 的一个怪癖吗？它有可能被改变吗？还是我应该只死记硬背？

这很合乎逻辑，不会很快改变。我建议您总体上了解更多关于 JS 和 jQuery 的知识，以提高您的理解。或者你可以接受这些东西并试着记住它们；）

【讨论】：