jquery 动画 css 样式不起作用

Question

我为动画表格创建了这段代码 -> http://codepen.io/CliffTam/pen/qRGQjE

当您点击一个元素时，该元素将展开。

我的问题是当我点击它时它的样式。我可以更改字体大小和填充，但无法更改字体颜色或行高。

这是我触发动画的代码:

   $el.animate({
            "font-size": "26px",
            paddingTop: 15,
            paddingRight: 5,
            paddingBottom: 15,
            paddingLeft: 10            }).next().slideDown();

如果我尝试这样做，将颜色更改为红色，它不起作用:

   $el.animate({
            "font-size": "26px",
            "color": "red",
            paddingTop: 15,
            paddingRight: 5,
            paddingBottom: 15,
            paddingLeft: 10            }).next().slideDown();

有人可以向我解释为什么代码不起作用吗？

谢谢!

Answer 1

jQuery 核心库默认不支持彩色动画。

您将需要使用 jQuery UI让 color 或 background-color 等属性在 animate() 等 JQuery 函数中工作。

解决方案之一:

如果可以，只需在 JQuery 之后包含 JQuery UI 库。可以找到许多相同的版本 here

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/ui/1.12.0/jquery-ui.min.js'></script> 

I have updated your Codepen