javascript - jquery 每个 div 添加删除类无限

Question

想要创建无限循环，在一定的超时时间内将类添加到每个 div

知道有这样的:

$(document).ready(function() {
  $('.small-bordered-box').each(function(i) {
    var $t = $(this);
    setTimeout(function() {
      $t.addClass('active');
    }, 2000 * i);
  });
});

.small-bordered-box {
  display: block;
  height: 118px;
  width: 100px;
  border: 2px solid #3e3b38;
  border-radius: 5px;
  float: left;
  margin-right: 35px;
}

.small-bordered-box.active {
  animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-bordered-box ">
  <a href="#">test1</a>
</div>
<div class="small-bordered-box ">
  <a href="#">test2</a>
</div>
<div class="small-bordered-box ">
  <a href="#">test3</a>
</div>

想要保持这样的效果，只是它会无限期..用户总是会看到这种效果，无论他们在页面上的什么地方。

Answer 1

您可以使用 setInterval 以元素长度*Timeouts-interval 的间隔摇动它，即 3*2000，例如，

$(document).ready(function() {
  function shakeIt() {
    $('.small-bordered-box').each(function(i) {
      var $t = $(this);
      setTimeout(function() {
        $t.addClass('active');
      }, 2000 * i);
    });
  }
  shakeIt();
  setInterval(function() {
    shakeIt();
    $('.small-bordered-box').removeClass('active');
  }, $('.small-bordered-box').length*2000);
  
});

.small-bordered-box {
  display: block;
  height: 118px;
  width: 100px;
  border: 2px solid #3e3b38;
  border-radius: 5px;
  float: left;
  margin-right: 35px;
}

.small-bordered-box.active {
  animation: shake 0.83s cubic-bezier(.36, .07, .19, .97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-bordered-box ">
  <a href="#">test1</a>
</div>
<div class="small-bordered-box ">
  <a href="#">test2</a>
</div>
<div class="small-bordered-box ">
  <a href="#">test3</a>
</div>