Question

我有以下HTML代码：`

<html> 
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      backgroundColor: '#f5f5f5',
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>`

但我无法使用动画提及背景颜色。
请告诉我有什么问题？

感谢
Smitha

Answer 1

要支持背景颜色更改，您需要包含jQuery UI或jQuery颜色库

From Docs

例如，宽度，高度或左边可以设置动画但是 background-color不能，除非使用jQuery.Color()插件

$(document).ready(function () {
    $("button").click(function () {
        $("div").animate({
            backgroundColor: 'red',
        });
    });
});

演示：jQuery UI
演示：jQuery Color

所以添加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>

Answer 2

我遇到了同样的问题，事实证明使用JS添加/删除类并在其中添加CSS3过渡以实现颜色转换更有效：

CSS
.firstColor{
background-color: #000000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.secondColor{
background-color: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

JS

if (your condition) {
    $("#yourID").removeClass('secondColor').addClass('firstColor');
}
else{
    $("#yourID").removeClass('firstColor').addClass('secondColor');
}

希望有所帮助：）

使用jquery animate更改背景颜色

2 个答案: