老虎机同步 jQuery 动画不工作

Question

我正在尝试为彩票创建老虎机效果。目标号码已经设置好，因此一旦按下停止按钮，它就会停在该号码上。插槽 1 一切正常。但是，如果我为插槽 2 和插槽 3 添加相同的代码，则会产生问题。

下面给出的是代码：

$(document).ready(function() {
  s1 = 1;
  s2 = 1;
  s3 = 1;
  num1 = 6;
  num2 = 5;
  num3 = 7; //Target for 3 slots
  i = 100; //Top margin for animation

  $('#start').click(function() {
    animateslot(50, 0);
  });

  $("#stop").click(function() {
    stopanimationslot1(50, 0);
  });
});


function animateslot(d = 150, i = 0) {
  i = i + 100;
  $('#slot1').animate({
    marginTop: -i
  }, {
    duration: d,
    complete: function() {
      $("#slot1").append("<h3>Column " + s1 + "</h3>");
      s1++;
      if (s1 > 9) {
        s1 = 1;
      }
      console.log(s1);
      animateslot(d, i);
    }
  });

  //If below given code is added it doesn't work**
  /*
  $('#slot2').animate(
   {
    marginTop: -i
   },
   {
    duration: d,
       complete: function() {
       $("#slot2").append("<h3>Column "+s2+"</h3>");
       s2++;
       if(s2>9){
        s2 = 1;
       }
       console.log("s2="+s2);
        animateslot(d, i);
    }
   }
  );
  */
}

function stopanimationslot1(d = 150, i = 0, num = 1) {
  $('#slot1').stop();
  i = i + 100;
  $('#slot1').animate({
    marginTop: -i
  }, d, function() {
    if (Math.abs(i / 100) == num1) {
      $('#slot1').clearQueue().stop(false, true);
      console.log("finished");
    } else {
      $("#slot1").append("<h3>Column " + s1 + "</h3>");
      s1++;
      if (s1 > 9) {
        s1 = 1;
      }
      stopanimationslot1(d + 50, i, num);
    }
  });
}

#slot1 h3,
#slot2 h3,
#slot3 h3 {
  width: 100px;
  height: 100px;
  border: 1px solid #999;
  margin: 0;
}

#slotmachine {
  max-height: 100px;
  overflow: hidden;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:(0);" id="start" class="btn btn-default">Start</a><br><br>
<a href="javascript:(0);" id="stop" class="btn btn-default">Stop</a><br><br>

<div class="container">
  <div class="row" id="slotmachine">
    <div class="col-sm-4" id="slot1">
      <h3>Column 1</h3>
    </div>
    <div class="col-sm-4" id="slot2">
      <h3>Column 1</h3>
    </div>
    <div class="col-sm-4" id="slot3">
      <h3>Column 1</h3>
    </div>
  </div>
</div>

也可以在这里找到：https://jsfiddle.net/sushanttayade123/fqkgvu59/

Answer 1

它没有按预期工作的原因在于animateslot(d, i);。

按下开始后：

槽 1 完成并调用 animateslot()
槽 2 完成并且也调用 animateslot()

在下一个 "animation cycle" 中，该方法不会像以前那样运行一次，而是两次，这会导致卡顿行为。每个周期的调用量都会以两倍的速度不断增长。

要解决此问题，请在所有动画完成后调用 animateSlot() 一次，或者将每个槽移动到它自己的函数中（animateSlot1()、animateSlot2(), ...).

最后的忠告：我不建议在每次旋转后添加一个新节点，因为这会导致性能下降。

老虎机同步 jQuery 动画不工作

Slot Machine simultaneous jQuery animation not working

javascript

jquery

css-animations

jquery-animate