无法重新启动动画

Question

我是运行一个特定的动画，点击一个按钮会持续一小段时间，完成后，我将使用相同的按钮重新启动动画，但由于某种原因它失败了重新启动，我无法进一步调试它。有什么建议吗？

http://plnkr.co/edit/8kZMrjCWbT1wn6FsU0h2?p=preview

这里是触发动画的点击函数：

$('.start').click(function() {
  stopAnimation = false;
  animateDiv();
  kickOff('L1');
});

Answer 1

这是因为你们每个 $('.a') 都要求你们每个 $('.a') 要求你们每个 $('.a')... 打电话给 animateDiv()。

尝试只在 $('.b') 上进行此调用，如果它对每个级别都是孤独的。或者简单地在 animateDiv()

中添加一个 setTimeout(animateDiv, 400);

function animateDiv() {
  var newq = makeNewPosition();

  $('.a').each(function(index, val) {
    if (stopAnimation) return;
        $(this).animate({
        top: newq[0],
        right: newq[1]
      }); 
      newq = makeNewPosition();

  });
  $('.b').each(function(index, val) {
      $(this).animate({
        top: newq[0],
        left: newq[1]
      }, function() {
        if (!stopAnimation) animateDiv();
      });
      newq = makeNewPosition();
  });
}

window.onload= function(){
$('.start').click(function() {
  stopAnimation = false;
  animateDiv();
  kickOff('L1');
});}();

function makeNewPosition() {
  if (!stopAnimation) {
    var h = $('.container').height() - 40;
    var w = $('.container').width() - 40;
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];
  } else {
    $('.timer').text('Boo-hoo you loose! :P');
  }
}

function animateDiv() {
  if (stopAnimation) return;
  var newq = makeNewPosition();

  $('.a').each(function(index, val) {
        $(this).animate({
        top: newq[0],
        right: newq[1]
      }); 
      newq = makeNewPosition();
      
  });
  $('.b').each(function(index, val) {
      $(this).animate({
        top: newq[0],
        left: newq[1]
      });
      newq = makeNewPosition();
  });
  setTimeout(animateDiv, 400);
}

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
 counter = setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.text(minutes + ":" + seconds);

    if (--timer < 0) {
      stopAnimation = true;
      clearInterval(counter);

    }
  }, 1000);
}

function kickOff(level) {
  if(level =='L1'){
    var mins = 60 * 0.1;
  }
  var display = $('.timer');
  startTimer(mins, display);
}

var isAwesome = function() {
  if(!stopAnimation){
    alert('Awesome');
  } else {
    alert('Little too late');
  }
 }

body, html {
  height: 100%;
  width: 100%;
}

div.a {
  width: 30px;
  height: 30px;
  border-radius: 25px;
  background-color: red;
  position: fixed;
}
div.b {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  background-color: yellow;
  position: fixed;
}

.container {
  margin: 0 auto;
  width: 100%;
  height: 80%;
}

.timer {
  width: 200px;
  margin: 30px auto;
  font-size: 20px;
  color: red;
  bottom: 10px;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="timer">
    00:00
  </div>
  <div class="start">
    Start
  </div>
  <div class="container">
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='b' onclick='isAwesome()'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
  </div>

无法重新启动动画

Unable to restart animation

javascript

jquery

animation