Question

我在w3schools.com上找到了这个动画示例：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
  {
  $("#btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $("#btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>

<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

</body>
</html>

（This can be run here）

但是，如果我尝试将其更改为动画背景颜色而不是高度，则不起作用。这是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function()
  {
  $("#btn1").click(function(){
    $("#box").animate({backgroundColor:"#0000ff"});
  });
  $("#btn2").click(function(){
    $("#box").animate({backgroundColor:"#98bf21"});
  });
});
</script>
</head>
<body>

<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>

</body>
</html>

（This can be run here）

这个jQuery教程（http://jqueryui.com/animate/）让它看起来应该可行，所以我哪里出错了？谢谢！

Answer 1

jQuery本身并不提供颜色值的动画。你需要一个插件来做到这一点。有几个，包括但不限于 jQuery UI。搜索＆＃34; jQuery颜色动画＆＃34;找到你的选择。以下是撰写本文时的前三名：

Answer 2

您需要在HTML中包含jQuery UI插件才能为颜色设置动画：

<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<!-- Other HTML -->
</head>

样式表是可选的，但您需要JS文件。另外，请确保在jQuery之后包含UI模块。

See an updated JSFiddle

Answer 3

您犯的小错误：

您必须加载jquery ui库才能使其正常工作。在您包含主jquery的下面添加它。

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

为什么jQuery不让我为div的背景颜色设置动画？

3 个答案: