Question

我做了div，如果我点击它，jquery制作子弹并且该元素是动画的。这是代码：

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

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

在动画完成之前我没有在div上第二次点击时，它可以正常工作。如果我这样做，我的第二个“子弹”从第一个位置开始动画。如何解决？谢谢你的帮助:)）

## UPDATE 这是有问题的jsfiddle： https://jsfiddle.net/2ghj1x45/

Answer 1

为什么不用变量超时点击功能：

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不会影响任何其他div的布局

like so

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

Jquery动画创建元素

2 个答案:

编辑：