jQuery - 修复动画

我正在创建一个新的“whack-a-mole”风格的游戏，孩子们必须根据问题点击正确的数字。jQuery - 修复动画

我有数字动画从一个顶部位置到另一个随机宽度，使他们看起来像他们像泡沫一样浮起来。

我遇到的唯一问题是，有时数字故障和他们的宽度突然改变，使它看起来从容器的一侧跳到另一侧。

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

要么我是盲人，要么是别的，有人能帮我找到问题的根源。

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

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/

来源

2013-01-03 Milo-J

@dystroy：真的吗？这个bug在Chromium/Linux上显示给我。 – Blender

数字应保持在相同的位置，并向上移动。他们跳到一边@dystroy –

@ Milo-J这个问题和上一个之间有什么区别：[http://stackoverflow.com/questions/13988711/randomly-mapping-divs](http://stackoverflow.com /问题/ 13988711 /随机映射-div的）？ – Eli

的问题是，你是为已经动画的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 here。

编辑：OP希望在不加速动画的情况下立即显示更多div。为此，我添加了20个以上的字符div（每个都是前10个数字的副本），修改了一些防护代码，更改了CSS以按类指定字符的图像，然后将20个动画的限制放在给定的时间。我也围绕拒绝已经是动画片的片断，选择另一片。我做了一些小的改进。更新JSFiddle here。

来源

2013-01-03 17:50:14

为什么downvote？ –

jQuery - 修复动画

回答

相关问题