gpt4 book ai didi

javascript - 为什么 jQuery 不允许我为 div 的背景颜色设置动画?

转载 作者:行者123 更新时间:2023-11-28 15:31:23 27 4
gpt4 key购买 nike

我在 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/ ) 看起来应该可行,那么我哪里出错了?谢谢!!

最佳答案

jQuery 本身不提供颜色值动画。你需要一个插件来做到这一点。有多种,包括但不限于 jQuery UI。搜索“jQuery 彩色动画”以找到您的选项。以下是截至撰写本文时前三名:

关于javascript - 为什么 jQuery 不允许我为 div 的背景颜色设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27240511/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com