javascript - 修复动画属性

Question

我目前正在做一些研究，为小学生创建一个新的数学游戏，其中 0-9 的 div 随机出现在容器内。

一开始就提出了一个问题。类似于 20 的倍数。然后用户必须点击正确的数字，最后将对其进行计数并给出分数。

我刚刚改变了 div 出现的速度，使它们出现的时间更长，并且一次出现多个，以使游戏对年幼的 child 来说更容易。

我像这样使用了“fadeIn”..

    $('#' + id).animate({
        top: newY,
        left: newX
    }, 'slow', function() {}).fadeIn(2000);
}

我的问题是，现在当我拍摄正确或错误的数字时，动画非常不稳定，我不明白为什么。

fiddle :http://jsfiddle.net/cFKHq/6/ (请参阅版本 5 以了解以前的情况)

Answer 1

在 startplay() 内部，控制调用 scramble() 时的并发，我使用名为 window.cont 的全局变量来实现，所以我替换了您的以下调用:

play = setInterval(scramble, 1800);

对于这个:

play = setInterval(function() { 
          if (window.cont){ 
              window.cont = false;
              scramble();
          }
}, 1000);

需要在代码开头全局设置 var window.cont，如下所示:

var miss = 0;
var hit = 0;
var target = $("#target");
window.cont = true;

因此，使用window.cont，您现在可以控制动画依次执行，而不重叠，如下所示:

$('#'+id).css({
    top: newY,
    left: newX
}).fadeIn(2000, function() {
      setTimeout(function() {
        $('#' + id).slideUp('fast');
        window.cont = true;
      }, 1500);
});

查看工作demo