Jquery 动画化创建的元素

Question

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

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

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

当我没有在动画完成前第二次点击 div 时它工作正常。如果我这样做，我的第二个 "bullet" 从第一个位置开始动画。如何解决？感谢您的帮助:)

更新## 这是有问题的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 不会影响任何其他 div

的布局

like so

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

Jquery 动画化创建的元素

Jquery animate created element

javascript

jquery

animation

jquery-animate

编辑：