Javascript jQuery动画动态创建的div

我有一个正在六个位置（列）之一创建的div，然后我想要这些新创建的div（.letter block）。它应该每秒创建一个新的块，这些块需要“落”到容器列div的底部（或者停在该列中最后一个块的顶部，以便获得块相互堆叠的效果，类似于俄罗斯方块）。我可以创建块，但一旦创建，它们就不会“掉”到容器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);
    };
});

$（文档）.ready（函数（）{
设置间隔（新字母，1000）
函数newLetter（）{
var$randCol=$（“#col”+（Math.floor（Math.random（）*6）+1））；
$randCol.prepend（“”）.animate（{'bottom'：'0'}，500）；
};
});

您的代码：

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

---

使JSFIDLE更容易理解这仍然不会为创建块设置动画，我知道这是因为这些元素在文档准备好时不存在，所以它无法识别任何“.letter block”元素，但我知道获取它们的唯一方法是通过$（document）。在上，但需要一个事件，我没有。我需要动画在创建时立即发生

。字母块{z-index:1；高度：39px；宽度：39px；背景色：#3399FF；边框半径：8px；位置：绝对；}

它是相对的，更改为绝对确实允许动画工作，但现在不能阻止它们重叠。以前，它们不会重叠（最新创建的一个将在顶部创建，并将最后一个向下推），但现在它们动画化，不再堆叠在一起，就在彼此的顶部。好吧，我忽略了在你的问题中，我只是假设

动画

只要正常工作就可以。这有点复杂，因为只要你能说服一个元素被放置在

bottom:0

中，它就会与其他被强制放置的元素发生冲突。你需要做一点数学运算，准确地计算出你想要每个新部门去哪里。我将在一分钟内用一些代码更新我的答案。老实说，如果我们可以只使用

float:down

，那就太好了，但是你只能左右浮动：（我相信我已经弄明白了，我刚刚创建了一个变量来计算$randCol列中

。字母块

div的数量，并将其设置为310（底部）-40*len，其中len是列中

字母块的编号。非常感谢您的帮助！我非常感谢。
$(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);
        });
    };
});

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