Question

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

一开始就提出了一个问题。比如，20的倍数。然后用户必须点击正确的，然后在最后计算它们并给出分数。

我刚刚改变了div显示的速度，这样它们可以显示更长的时间并且一次不止一个，以便让年幼的孩子更容易玩游戏。

我像这样使用“fadeIn”..

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

我的问题是，现在当我拍摄正确或不正确的数字时，动画非常微不足道，我无法弄清楚原因。

小提琴：http://jsfiddle.net/cFKHq/6/（参见第5版看看之前的情况）

Answer 1

在startplay()内部，在调用scramble()时控制并发性，我使用名为window.cont的全局var来执行此操作，因此我替换了以下调用：

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

修复动画属性

1 个答案: