下面是我的 HTML-CSS-Jquery 代码。 问题:当我单击背景按钮时，颜色立即从橙色变为绿色。 我想要的是，当我点击背景按钮时，div 的背景颜色必须缓慢改变颜色。 请注意，我只被允许使用 Jquery。不得使用其他插件。
代码:
<!DOCTYPE html>
<html>
<head>
<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#width").click(function(){
$("#box").animate(
{"width": "300px"},
"slow");
});
$("#height").click(function(){
$("#box").animate(
{"height": "300px"},
"slow");
});
$("#background").click(function(){
$("#box").css("background-color","green");
});
});
</script>
</head>
<body>
<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p>
</div>
</body>
</html>
最佳答案
尝试这样的事情，FIDDLE
$("#background").click(function(){
$("#box").css({
transition : 'background-color 1s ease-in-out',
"background-color": "green"
});
});
关于javascript - 仅使用 jquery 逐渐更改 div 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19995094/