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 });