gpt4 book ai didi

javascript - 使用带有动画的 jquery 将 css 背景更改为随机背景

转载 作者:行者123 更新时间:2023-11-27 22:32:25 25 4
gpt4 key购买 nike

所以我有一个随机报价生成器,每次用户单击“新建报价”按钮时,包含报价的 body 和 mainDiv 的背景都会发生变化。我想要一个动画发生,我想要它淡出并且新背景在超过 100 毫秒内淡出。我做了一些阅读,但我的情况有所不同,因为我的背景是从带有 math.random 的数组中随机选择的。这是我的代码。

<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]);
});

我如何制作背景颜色(主体和主 div)变化的动画,以便前一个背景在 100 毫秒内淡出,新背景在 100 毫秒内进入?谢谢

最佳答案

您可以在 css 中向“#mainDiv”和“body”添加过渡,以更改背景颜色并淡出以及在“targtP”div 中。

关于javascript - 使用带有动画的 jquery 将 css 背景更改为随机背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39438517/

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