動態創建的jQuery動畫div

我有一個創建在六個位置（列）之一的div，然後我想要這些新創建的div（.letter-block）。它應該每秒創建一個新塊，這些塊需要「落到」容器列div的底部（或者停在該列的最後一個塊的頂部，以便獲得塊堆疊在每個塊頂部的效果其他，類似於俄羅斯方塊）。我可以獲取要創建的塊，但一旦創建完成，它們就不會「跌落」到容器div的底部。動態創建的jQuery動畫div

$(document).ready(function(){ 
    setInterval(newLetter, 1000) 
    function newLetter(){ 
    var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1)); 
    $randCol.prepend("<div class='letter-block'></div>").animate({'bottom':'0'}, 500); 
    }; 
});

來源

2013-12-09 Kyle B.

化妝的jsfiddle所以它更容易理解 –

您的代碼：

var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1)); 
$randCol.prepend("<div class='letter-block'></div>").animate({'bottom':'0'}, 500);

即在此處選擇是你的六列的一個元素。您預先添加了新的<div>，但該列仍然是選定的項目，因此您正在試圖爲列創建動畫而不是新的<div>。然後你需要計算你坐在頂部的塊數。計算列中的塊數，然後將其乘以它們的高度，即您是新的底部位置。試試這個代碼：

$(document).ready(function(){ 
    setInterval(newLetter, 1000); 
    function newLetter(){ 
     var $randCol = $("#col" + (Math.floor(Math.random()*6) + 1)); 
     var $newDiv = $("<div class='letter-block'></div>"); 
     $randCol.prepend($newDiv); 
     $(document).ready(function(){ 
      var $oldBlocks = $randCol.find('.letter-block'); 
      var yPos = '' + ($oldBlocks.length * $oldBlocks.first().outerHeight()); 
      $newDiv.animate({ 
       'bottom': yPos 
      }, 500); 
     }); 
    }; 
});

確保新的div是position: absolute或position: relative（可能是絕對的，你的情況）或類似bottom定向屬性將不會進行這項工作。 CSS：

.letter-block { 
    position: absolute; 
    // other CSS 
}

來源

2013-12-09 01:29:19 RustyToms

這仍然沒有動畫製作塊，我知道這是因爲這些元素不存在時，該文檔已準備就緒，因此不承認任何「 .letter-block'元素，但我知道得到它們的唯一方法是通過$（document）.on，但是然後需要一個事件，我沒有。我需要動畫在創作時立即發生 –

我編輯了答案。 '.letter-block'的CSS是什麼？ – RustyToms

'。-letter-block {z-index：1; height：39px; width：39px; background-color：＃3399FF; border-radius：8px; position：absolute; }' 它一直是相對的，改爲絕對允許動畫工作，但它不會使它們現在不會重疊。之前，他們不會重疊（最新創建的會創建頂部，並推倒最後一個），但現在他們動畫，不再堆疊，只是在彼此頂部 –

動態創建的jQuery動畫div

回答

相關問題