1

我正在创建一个新的“打地鼠”风格的游戏，孩子们必须根据问题打出正确的数字。

我让数字从一个设置的顶部位置动画到另一个具有随机宽度的位置，这样它们看起来就像像气泡一样漂浮起来。

我遇到的唯一问题是，有时数字会出现故障，并且它们的宽度会突然变化，使其看起来从容器的一侧跳到另一侧。

我能想到的唯一解释是宽度必须在我试图寻找的地方重置。

我是盲人还是其他原因，有人可以帮我找到问题的根源。

这是映射数字的代码...

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function scramble() {
    var children = $('#container').children();
    var randomId = randomFromTo(1, children.length);
    moveRandom("char" + randomId);
}

function moveRandom(id) {
    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css(
        'top', '400px'
    ).fadeIn(1000).animate({
    '   top': '-100px'
    }, 10000).fadeOut(1000);

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(1000, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(1000);
            window.cont++;
        }, 1000);
    });

这也是一个工作小提琴，所以你可以看到我正在谈论的问题：http: //jsfiddle.net/pUwKb/26/

4

1 回答 1

0

问题是您正在为已经动画的 ID 重新输入 moveRandom 函数。新的宽度计算会导致在已经动画的移动过程中重新分配片段时似乎跳跃。解决此问题的一种方法是拒绝您已经制作动画的片段的新片段运动。我修改了您的 jsFiddle 并使用以下代码对其进行了修复：

// Keep track of the pieces actually moving
var currentMoving = [];

function moveRandom(id) {
    // If this one's already animating, skip it
    if ($.inArray(id, currentMoving) !== -1) {
        return;
    }

    // Mark this one as animating
    currentMoving.push(id);

    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css('top', '400px').fadeIn(1000).animate({
        'top': '-100px'
    }, 10000).fadeOut(1000);

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(1000, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(1000);

            // Mark this as no longer animating                
            var ix = $.inArray(id, currentMoving);
            if (ix !== -1) {
                currentMoving.splice(ix, 1);
            }

            window.cont++;
        }, 1000);
    });
}

在这里分叉 jsFiddle 。

编辑：OP想要一次显示更多的div而不加快动画速度。为此，我添加了 20 个字符 div（每一个都是前 10 个数字的副本），稍微修正了保护代码，更改了 CSS 以按类指定字符的图像，然后将 20 个动画的限制设置为给定的时间。我还围绕拒绝已经动画的作品设置了一个循环，以选择另一个。我做了一些其他的小改进。在这里更新了 JSFiddle 。

于 2013-01-03T17:50:14.180 回答