Question

我想在5秒钟后将一个类添加到一个元素，然后在添加一个类之后再等待5秒钟并删除它，我希望这可以连续循环进行。我尝试了以下添加它的方法，但是随后卡住了。

function showOverlayTimer() {
  setTimeout(
    function() {
      $('.kiosk-overlay').addClass('active');
      hideOverlayTimer();
    }, 1000);
}

function hideOverlayTimer() {
  setTimeout(
    function() {
      $('.kiosk-overlay').removeClass('active');
      showOverlayTimer();
    }, 1000);
}

showOverlayTimer();

.active { border: 1px solid green; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kiosk-overlay">KIOSK OVERLAY</div>

Answer 1

使用setInterval至toggleClass：

setInterval(function () {
    $('.kiosk-overlay').toggleClass('active');
}, 5000)

.kiosk-overlay:before {
  content: 'Inactive';
  display: inline;
  color: red;
}

.kiosk-overlay.active:before {
  content: 'Active';
  display: inline;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="kiosk-overlay"></div>

X秒钟后添加课程，然后X秒钟后连续删除课程

1 个答案: