使用计时器在div上使用Jquery动画类

Question

我试着用html和css制作一个头奖旋转界面。当单击play按钮并在每个元素上重做5次处理时，我如何向html元素添加新的类名？

​

​

下面是代码

​

$('.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

也许你想要这样的东西：

​

var current = 1;
var num = 0;
var max = $('.jackpot').length+1;
var rotate = 5;
var speed = 200;

function change() {
  $('.jack-' + current).toggleClass("active-spin");
  current++;
  if (current == max) {
    current = 1;
    num++;
  }
  if (num != rotate) {
    setTimeout(function() {
      change()
    }, speed);
  } else {
    $('.jackpot').removeClass("active-spin");
    current=1;
    num=0;
  }
}

$('.play').click(function(event) {
  setTimeout(function() {
    change()
  }, speed);
});

.jackpot {
  display: inline-block;
  padding: 10px;
  margin: 10px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition:0.5s;
}

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

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

​

$('.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>

​