jQuery動畫創建的元素

Question

我做了div，如果我單擊它，jquery會生成子彈，並且該元素會設置為動畫。 這是代碼：

$('.square').click(function() {

$('<div class="bullet"></div>').appendTo($('body')).animate({
    'margin-top': 554
  }, 2000, function() {
$(this).remove();
  });
});

當我在動畫完成前沒有第二次單擊div時，它可以正常工作。 如果這樣做，我的第二個“項目符號”將從第一個位置開始播放動畫。 如何解決？ 感謝幫助 ：）

更新##這是有問題的jsfiddle： https ://jsfiddle.net/2ghj1x45/

Answer 1

為什么不使用變量使click函數超時：

var animating = false;
$('.square').click(function() {

   if(!animating) {
      animating = true;
      setTimeout(function() {
          animating = false;
      }, 2000);

      $('<div class="bullet"></div>').appendTo($('body')).animate({
          'margin-top': 554
        }, 2000, function() {
           $(this).remove();
      });            
    }
});

編輯：

更新了JSfiddle

Answer 2

這是因為所有元素都具有一定的尺寸，因為它們的位置不是絕對的，因此添加的每個子彈div都有顯示塊，因此將獲得其自己的行，其高度為子彈尺寸+邊距top，隨着動畫的增加而增加。 嘗試改為使用絕對位置，以便項目符號div不會影響任何其他div的布局

像這樣

$(bullet).animate({ top: value });