动态创建的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

回答

相关问题