Question

我为动画表创建了此代码 - ＆gt; 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核心库默认情况下不支持彩色动画。

您需要对color或background-color等属性使用jQuery UI才能在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

Answer 2

如果我理解你想要达到的效果，可以通过添加：

来实现

$('dt').css({"color" : "black"});
$el.css({"color" : "red"});

在您的$el.animate({ [...] }).next().slideDown();声明下方

。

要启用颜色过渡到动画，您可以添加：

dt {transition: color 0.4s linear;}

到您的CSS样式。

jquery动画css样式不起作用

2 个答案: