Question

我有一个在六个位置（列）之一中创建的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);
    };
});

Answer 1

您的代码：

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
}

jQuery动画创建的动画div

1 个答案: