Javascript 使用带有动画的jquery将css背景更改为随机背景
因此，我有一个随机报价生成器，每当用户单击New quote按钮时，包含报价的body和mainDiv的背景都会发生变化。我想要一个动画发生，我想要它淡出，新的背景淡出超过100毫秒。我读了一些书，但我的情况不同，因为我的背景是用math.random从数组中随机选择的。这是我的密码Javascript 使用带有动画的jquery将css背景更改为随机背景,javascript,jquery,animation,Javascript,Jquery,Animation,因此，我有一个随机报价生成器，每当用户单击New quote按钮时，包含报价的body和mainDiv的背景都会发生变化。我想要一个动画发生，我想要它淡出，新的背景淡出超过100毫秒。我读了一些书，但我的情况不同，因为我的背景是用math.random从数组中随机选择的。这是我的密码 <body> <div id="mainDiv" class="colorChange"> <button id="newQuote" class="btn btn-dan
<body>
<div id="mainDiv" class="colorChange">
<button id="newQuote" class="btn btn-danger">New Quote</button>
<div id="targetP"></div>
</div>
</body>
var divBackground, bodyBackground,quoteButton,targetP,number,sec;
targetP=$("#targetP").val();
$("#newQuote").click(function () {
number=Math.floor((Math.random() * 10) + 1);
sec=Math.floor((Math.random() * 10) + 1);
$("#mainDiv").css("background-color",colors[number]);
$("body").css("background-color",colors[sec]);
$("#targetP").html(quotes[number]);
});
新报价
var divBackground，bodyBackground，quoteButton，targetP，number，sec；
targetP=$（“#targetP”）.val（）；
$（“#newQuote”）。单击（函数（）{
数字=数学楼层（（数学随机（）*10）+1）；
秒=数学楼层（（数学随机（）*10）+1）；
$（“#mainDiv”）.css（“背景色”，颜色[数字]）；
$（“body”）.css（“背景色”，颜色[sec]）；
$（“#targetP”）.html（引号[编号]；
});
如何设置背景颜色（主体和主div）变化的动画，使以前的背景在100ms内消失，而新的背景在100ms内出现？谢谢您可以将css中的过渡添加到“#mainDiv”和“body”中，以更改背景颜色和淡出，并添加到“targtP”部分。我在那里没有看到任何颜色。 基本上，我所做的是创建一个带有颜色的数组（当然，把你的10种颜色放进去），然后我告诉函数从数组中选择哪种颜色。 为什么是10？它是以数字和秒为单位的最大数字。 我小时候写这些是为了便于理解和阅读。希望能有所帮助
var divBackground，bodyBackground，quoteButton，targetP，number，sec；
var颜色=[“红”、“绿”、“蓝”、“黑”、“海军蓝”、“粉红”、“红”、“银”、“蓝”、“黑”、“银”、“粉红”]；
函数myFunction（）{
数字=数学楼层（（数学随机（）*10）+1）；
秒=数学楼层（（数学随机（）*10）+1）；
document.getElementById（'mainDiv'）.style.backgroundColor=colors[number]；
document.getElementById（“body”）.style.backgroundColor=颜色[sec]；
};
身体{
过渡：1s；
}
#mainDiv{
宽度：200px；
高度：200px；
过渡：1s；
}
新报价