我在 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>
但是，如果我尝试更改此设置以设置背景颜色而不是高度的动画，则它不起作用。这是我的代码:
<!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>
这个 jQuery 教程 ( http://jqueryui.com/animate/ ) 看起来应该可行，那么我哪里出错了？谢谢!!
最佳答案
jQuery 本身不提供颜色值动画。你需要一个插件来做到这一点。有多种，包括但不限于 jQuery UI。搜索“jQuery 彩色动画”以找到您的选项。以下是截至撰写本文时前三名:
关于javascript - 为什么 jQuery 不允许我为 div 的背景颜色设置动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27240511/