javascript - jQuery - 修复动画

Question

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

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

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

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

要么是我瞎了，要么是别的原因，有人能帮我找到问题的根源吗？

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

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);
    });

这也是一个工作 fiddle ，因此您可以看到我正在谈论的问题:http://jsfiddle.net/pUwKb/26/

Answer 1

问题是您正在为已经动画化的 ID 重新输入 moveRandom 函数。新的宽度计算导致在已经动画化的运动过程中重新分配该 block 时，该 block 看起来会跳跃。解决此问题的一种方法是拒绝您已经制作动画的片段的新片段运动。我修改了你的 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);
    });
}

fork 的 jsFiddle here .

编辑:OP 希望一次显示更多 div，而不加快动画速度。为此，我添加了 20 个以上的 Angular 色 div(每个 Angular 色都是前 10 个数字的副本)，稍微修复了防护代码，更改了 CSS 以按类指定 Angular 色的图像，然后将 20 个动画的限制设置为给定时间。我还围绕拒绝已经动画的作品设置了一个循环，以选择另一个。我还做了一些其他的小改进。更新了 JSFiddle here .