Javascript 更改div显示的背景色

我有三个分区，一个接一个地显示/隐藏。我想要的是，当一个特定的div显示时，页面的背景颜色会改变。另外，由于过渡持续时间

的缘故，更改变得更加平滑

正如您所猜测的，
gradient low
颜色将与
low
div同时显示，其他颜色也是如此。我遇到的一个困难是，不同的div并非每次都以相同的顺序显示（即
low
div后面可能是
high
div，然后是
medium
，等等。这是随机的。）


$（文档）.ready（函数（）{
$（“#低”）.on（函数（）{
$（“#低”）.css（“梯度低”）；
$（“#中等”）.hide（）；
$（“高”）.hide（）；
});
});
。梯度低{
背景：ddd6f3；
背景：-webkit线性梯度（向左，#faaca8，#ddd6f3）；
背景：线性梯度（向左，#faaca8，#ddd6f3）；
过渡时间：0.4s；
}
.坡度适中{
背景：#ff6e7f；
背景：-webkit线性梯度（向左，#ff6e7f，#bfe9ff）；
背景：线性梯度（向左，#ff6e7f，#bfe9ff）；
过渡时间：0.4s；
}
.梯度高{
背景：EECDA3；
背景：-webkit线性梯度（向左，#EF629F，#EECDA3）；
背景：线性梯度（向左，#EF629F，#EECDA3）；
过渡时间：0.4s；
}

低
中庸的
高
你需要这样的东西

function showLow() {
  $('body').addClass('gradient-low').removeClass('gradient-moderate').removeClass('gradient-high');
  $('#moderate, #high').hide();
  $('#low').show();
}

InfiniteLop=false
//设置动画是否应继续触发
试着把这个添加到你的css中，它帮了我的忙
 

您应该根据主体具有的.gradient-*类显示或隐藏div

下面是一个示例，每3秒更改一次级别。changeLevel函数有一个if-else语句，用于设置div的display属性以及在body中添加或删除gradient-*类


$（文档）.ready（函数（）{
$（“主体”）.addClass（“梯度低”）；
函数更改级别（）{
if（$（“主体”）.hasClass（“梯度低”））{
$（“#低”）.css（“显示”、“无”）；
$（“#中等”）.css（“显示”、“块”）；
$（“主体”）.removeClass（“梯度低”）；
$（“主体”）.addClass（“梯度适中”）；
}
否则，如果（$（“主体”）.hasClass（“梯度适中”））{
$（“中等”）.css（“显示”、“无”）；
$（“#高”）.css（“显示”、“块”）；
$（“主体”）.removeClass（“梯度适中”）；
$（“主体”）.addClass（“梯度高”）；
}
否则{
$（“高”）.css（“显示”、“无”）；
$（“#低”）.css（“显示”、“块”）；
$（“主体”）.removeClass（“梯度高”）；
$（“主体”）.addClass（“梯度低”）；
}
设置超时（变更级别，3000）；
}
设置超时（变更级别，3000）；
});
。梯度低{
背景：ddd6f3；
背景：-webkit线性梯度（向左，#faaca8，#ddd6f3）；
背景：线性梯度（向左，#faaca8，#ddd6f3）；
过渡时间：0.4s；
}
.坡度适中{
背景：#ff6e7f；
背景：-webkit线性梯度（向左，#ff6e7f，#bfe9ff）；
背景：线性梯度（向左，#ff6e7f，#bfe9ff）；
过渡时间：0.4s；
}
.梯度高{
背景：EECDA3；
背景：-webkit线性梯度（向左，#EF629F，#EECDA3）；
背景：线性梯度（向左，#EF629F，#EECDA3）；
过渡时间：0.4s；
}

低
中庸的
高
div是如何依次出现的？您对（
on（）的
调用缺少事件名称，因此实际上不会做任何事情，因为它是完全随机的（它是一个随机改变音乐强度的音乐播放器）。因此，在一个“低”div之后，可以有一个“中等”div，但也可以有一个“高”div。这就是我不知道jQuery代码应该放在哪里的主要原因。