Question

我无法让这个backgroundcolor淡出工作

$("#x").css("background-color", "#00FF00")
$("#x").animate({ backgroundColor: '#000000' }, 2000)

http://jsfiddle.net/bf2vwba7/

Answer 1

您使用它的方式是jquery-ui Color Animation的一部分。您可以将它包含在您的项目中：

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

fiddle

Answer 2

我建议你用CSS过渡来做这件事：

#x
{
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;  
}

然后只需设置CSS或切换一个类而不用担心动画：

$("#x").css("background-color", "#000000");
$("#x").css("background-color", "#00FF00");

我可能更喜欢切换一个类，如果它是我并且上下文适合它：

<强> CSS：

#x
{
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;  
    background-color: #00FF00;
}

#x.black
{
    background-color: #000000;
}

<强> JS：

$('#x').toggleClass('black');

在这里，您可以很好地分离功能和风格。

转换可以具有一定的性能优势，但如果您选择此路线，请务必检查兼容性：

http://caniuse.com/#search=transitions

动画backgroundcolor淡出不起作用

2 个答案: