Change background color on display of a div

Question

I have three divs showing/hiding one after the other. What I want is that when one particular div displays, the background color of the page changes. Plus the change is made smooth thanks to a transition-duration .

As you may guess, the gradient-low color would display at the same time as the low div, and same thing for the others. One difficulty I have is that the different divs are not showing in the same order every time (ie a low div could be followed by a high div, then by moderate , etc. It's random.)

 $(document).ready(function() { $("#low").on(function() { $("#low").css("gradient-low"); $("#moderate").hide(); $("high").hide(); }); }); 

 .gradient-low { background: #ddd6f3; background: -webkit-linear-gradient(to left, #faaca8, #ddd6f3); background: linear-gradient(to left, #faaca8, #ddd6f3); transition-duration: 0.4s; } .gradient-moderate { background: #ff6e7f; background: -webkit-linear-gradient(to left, #ff6e7f, #bfe9ff); background: linear-gradient(to left, #ff6e7f, #bfe9ff); transition-duration: 0.4s; } .gradient-high { background: #EECDA3; background: -webkit-linear-gradient(to left, #EF629F, #EECDA3); background: linear-gradient(to left, #EF629F, #EECDA3); transition-duration: 0.4s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="low"> <h3 class="level">Low</h3> </div> <div id="moderate" style="display: none;"> <h3 class="level">Moderate</h3> </div> <div id="high" style="display: none;"> <h3 class="level">High</h3> </div> 

I'm a beginner in jQuery/javascript and you might guess that I'm having some difficulties. Any help on the process would be appreciated.

Answer 1

you would need something like that

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

Answer 2

infiniteLoop = false //设置动画是否应继续触发，尝试将其添加到您的css中对我有帮助。

Answer 3

• You should show or hide div based on what .gradient-* class the body has.

Here is an example, level will be changed every 3 seconds. The changeLevel function has a if else statement which sets display property of div and add or remove gradient-* class in body.

 $(document).ready(function() { $("body").addClass ("gradient-low"); function changeLevel () { if ($("body").hasClass ("gradient-low")) { $("#low").css ("display", "none"); $("#moderate").css ("display", "block"); $("body").removeClass ("gradient-low"); $("body").addClass ("gradient-moderate"); } else if ($("body").hasClass ("gradient-moderate")) { $("#moderate").css ("display", "none"); $("#high").css ("display", "block"); $("body").removeClass ("gradient-moderate"); $("body").addClass ("gradient-high"); } else { $("#high").css ("display", "none"); $("#low").css ("display", "block"); $("body").removeClass ("gradient-high"); $("body").addClass ("gradient-low"); } setTimeout(changeLevel, 3000); } setTimeout(changeLevel, 3000); }); 

 .gradient-low { background: #ddd6f3; background: -webkit-linear-gradient(to left, #faaca8, #ddd6f3); background: linear-gradient(to left, #faaca8, #ddd6f3); transition-duration: 0.4s; } .gradient-moderate { background: #ff6e7f; background: -webkit-linear-gradient(to left, #ff6e7f, #bfe9ff); background: linear-gradient(to left, #ff6e7f, #bfe9ff); transition-duration: 0.4s; } .gradient-high { background: #EECDA3; background: -webkit-linear-gradient(to left, #EF629F, #EECDA3); background: linear-gradient(to left, #EF629F, #EECDA3); transition-duration: 0.4s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="low"> <h3 class="level">Low</h3> </div> <div id="moderate" style="display: none;"> <h3 class="level">Moderate</h3> </div> <div id="high" style="display: none;"> <h3 class="level">High</h3> </div>