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 - 修復動畫

回答

相關問題