동적으로 생성 된 jQuery animate div

Question

6 개 위치 (열) 중 하나에서 생성되는 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); 

여기에서 선택한 당신의 6 개 열 중 하나입니다 요소입니다. 새 <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); 
     }); 
    }; 
}); 

는 새로운 사업부는 (귀하의 경우 아마도 절대) position: absolute 또는 position: relative 있는지 확인하십시오 또는 bottom 같은 방향성은 작동하지 않습니다. CSS :

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