javascript - Jquery 使用计时器为 div 上的类设置动画

Question

我正在尝试使用 html 和 css 制作一个累积奖金旋转界面。请问如何在单击播放按钮时将新类名添加到 html 元素并在每个元素上重做 5 次该过程？

下面是代码

$('.play').click(function(event){
    var speed = 200; // speed - timeout
    var rotate = 5; //number of animation
    var jackpot = $('.jackpot');
    for (var i = 1; i < jackpot.length; i++) {
        $('.jack-'+i).nextAll().removeClass("active-spin");
        $('.jack-'+i).prevAll().removeClass("active-spin");
        $('.jack-'+i).addClass("active-spin");
    }
});

.jackpot.active-spin{
    border: 1px solid blue;
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="jackpot jack-1">JK</div>
<div class="jackpot jack-2">JK</div>
<div class="jackpot jack-3">JK</div>
<div class="jackpot jack-4">JK</div>
<div class="jackpot jack-5">JK</div>
<div class="jackpot jack-6">JK</div>
</div>
   <button class="play">Try</button>

Answer 1

我添加了一个新参数，以毫秒为单位测量动画长度。

$('.play').click(function(event) {
  var speed = 200; // speed - timeout
  var rotate = 5; //number of animation
  var dt = 1000; // aproximate duration of the animation
  var jackpot = $('.jackpot');
  for (var i = 1; i <= jackpot.length; i++) {
    var j = $('.jack-' + i);
    setTimeout((function(el) {
      return function() {
        $('.jackpot').removeClass("active-spin");
        el.addClass("active-spin");
      }
    })(j), (i - 1) * (dt + speed));
  }
  setTimeout(function() {
    $('.jackpot').removeClass("active-spin");
  }, i * (dt + speed));
});

  .jackpot {
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPnPO5H2gZ-VbzQm4sM9FtUzixFHUuicVq6qsDQ1z3csh75H5ukw');
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px;
  height: 100px;
  position: absolute;
}

.jack-1 {
  top: 0;
  left: 0;
}

.jack-2 {
  top: 0;
  left: 50%;
}

.jack-3 {
  top: 0;
  right: 0;
}

.jack-4 {
  bottom: 0;
  right: 0;
}

.jack-5 {
  bottom: 0;
  left: 50%;
}

.jack-6 {
  bottom: 0;
  left: 0;
}

.active-spin {
  background-image: url('http://bestanimations.com/Games/Awards/trophy-gold-animated-gif-3.gif') !important;
  background-size: contain;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="jackpot jack-1"></div>
  <div class="jackpot jack-2"></div>
  <div class="jackpot jack-3"></div>
  <div class="jackpot jack-4"></div>
  <div class="jackpot jack-5"></div>
  <div class="jackpot jack-6"></div>
</div>
<button class="play"> Play </button>