在已经制作的jquery代码中，在问题之间放置大约2秒的休息时间

Question

我有一个jquery代码，它对于将一个问题更改为另一个问题很有用。他们自己的问题存储在div中。但是，我正在尝试找出如何在这些问题之间进行一些小时间制动的解决方案。

我目前唯一的解决方案是在特定时间隐藏/显示每个带有问题的div，但这在代码方面真的很糟糕，我希望有一些看起来很漂亮并且可以轻松更改的东西(时间方面(。

jQuery(function() {
      var $els = $('div[id^=question]'),
        i = 0,
        len = $els.length;
      $els.slice(1).hide();
      setInterval(function() {
        $els.eq(i).fadeOut(function() {
          i = (i + 1) % len
          $els.eq(i).fadeIn();
        })
      }, 15000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="question1"></div>
<div id="question2" class="question">
  <input type="radio" name="q1" value="non" id="non" style="visibility: hidden" checked><br>
  <label> <input type="radio" name="q1" value="1" id="guess" class="radio"  >Rain</label>
  <label> <input type="radio" name="q1" value="2" id="guess" class="radio"  >No rain</label><br>
</div> <br>
<div id="question3" class="question">
  <input type="radio" name="q2" value="non" id="non" style="visibility: hidden" checked><br>
  <label> <input type="radio" name="q2" value="1" id="guess" class="radio" >Rain</label>
  <label> <input type="radio" name="q2" value="2" id="guess" class="radio" >No rain</label><br>
</div> <br>

Answer 1

看看我的方法。我用普通的旧CSS解决了大部分问题。

const getNextQuestion = (current) => {
  let next = current.nextElementSibling;
  if (next.tagName !== 'DIV') {
    return;
  }
  return next;
}
let currentQuestion = document.querySelector('.is-open');
document.querySelector('button').addEventListener('click', () => {
  let currentQuestion = document.querySelector('.is-open');
  let nextQuestion = getNextQuestion(currentQuestion);
  currentQuestion.classList.remove('is-open');
  nextQuestion.classList.add('is-open');
  currentQuestion = nextQuestion;
});

.question {
  border: 1px solid red;
  background: tomato;
  margin-bottom: 25px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: 'Open Sans';
  opacity: 0;
  visibility: none;
  transition: visibility 1s linear, opacity 1s linear;
}
.is-open {
  opacity: 1;
  visibility: visible;
}

<div>
  <div class="question is-open">
    Question 1
  </div>
  <div class="question">
    Questi
    <div>
      <div class="question is-open">
        Question 1
      </div>
      <div cla<div>
        <div class="question is-open">
          Question 1
        </div>
        <div class="question">
          Question 2
        </div>
      </div>
      <button>
Next Question
</button> ss="question"> Question 2
    </div>
  </div>
  <button>
Next Question
</button> on 2
</div>
</div>
<button>
Next Question
</button>