Question

所以我有一个随机引用生成器，每次用户单击New Quote按钮时，包含引号的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毫秒内消失？感谢

Answer 1

您可以在css中添加转换到“#mainDiv”和“body”以更改背景颜色并淡出“targtP”div。

Answer 2

我在那里看不到任何颜色。基本上我所做的是用颜色创建一个数组（当然把你的10种颜色），然后我告诉函数从数组中选择哪种颜色。为什么10？它的最大数字可以是数字和秒。我小时候写这些是为了便于理解和阅读。希望它有所帮助。

＆＃13;

<script>
  var divBackground, bodyBackground, quoteButton, targetP, number, sec;
var colors = ["red","green","blue","black","navy","pink","red","silver","blue","black","silver","pink"];
function myFunction(){
  number = Math.floor((Math.random() * 10) + 1);
  sec = Math.floor((Math.random() * 10) + 1);
  document.getElementById('mainDiv').style.backgroundColor =  colors[number];
  document.getElementById("body").style.backgroundColor =  colors[sec];
};
</script>

＆＃13;

<style>
body{
  transition: 1s;
}
#mainDiv{
  width: 200px;
  height: 200px;
  transition: 1s;
}
</style>

＆＃13;

</head>
  <body id="body">
    <div id="mainDiv" class="colorChange">
      <button id="newQuote" class="btn btn-danger" onclick="myFunction()">New Quote</button>
      <div id="targetP"></div>
    </div>

＆＃13;

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

2 个答案: