创建相同 ID 的多个实例

Question

我有一个问题，我似乎无法弄清楚自己。

假设我创建了一个段落，上面写着“+1”。 当我单击代码中已经存在的按钮时，我可以让这个段落出现在按钮上方，我可以改变它，使它的“y”增加并在缓慢淡出的同时向上移动。

因此，您单击按钮，上方会出现 +1 并在淡入淡出时向上移动。

如果我在第一个有机会消失之前单击按钮，我该如何创建这个 +1 的新实例而不删除第一个？

所以，如果我真的快速点击按钮，一串 +1 会出现在按钮上方，然后慢慢淡出，一个接一个。 知道我将如何去做吗？

谢谢！！

Answer 1

这是使用jQuery的解决方案：

 $('button').on('click', function() { var $newPlus = $('<div class="plus">+1</div>'); $('#area').append($newPlus); setTimeout(function(){ $newPlus.addClass('fade'); }, 50); setTimeout(function(){ $newPlus.remove(); }, 650); });

 #area { position: relative; padding: 70px; } #area .plus { position: absolute; left: 100px; top: 50px; opacity: 1; transition: top 300ms ease-out, opacity 600ms ease-in-out; } #area .plus.fade { top: 0px; opacity: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="area"> <button>Plus One</button> </div>