Question

我有三个div显示/隐藏一个接一个。我想要的是，当显示一个特定的div时，页面的背景颜色会发生变化。此外，由于transition-duration可以使更改顺利进行。

正如您可能猜到的那样，gradient-low颜色将与low div同时显示，而其他颜色则相同。我遇到的一个难点是不同的div每次都不会以相同的顺序显示（即low div后跟high div，然后是moderate等。＃39;随机。）

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我是jQuery / javascript的初学者，你可能会猜到我遇到了一些困难。任何有关该过程的帮助都将受到赞赏。

Answer 1

你需要类似的东西

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

Answer 2

infiniteLoop = false //设置动画是否应继续触发尝试将此添加到您的CSS帮助我。

Answer 3

您应该根据正文的.gradient- *类显示或隐藏div。

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

＆＃13;

$(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);
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在div的显示上更改背景颜色

3 个答案: