创建具有相同ID的多个实例

Question

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

假设我创建了一个段落，上面写着＆＃34; + 1＆＃34;。当我点击代码中已存在的按钮时，我可以将此段落显示在按钮上方，然后我可以对其进行转换，以便它可以使用它。增加并且在缓慢消退的同时向上移动。

所以，你点击按钮，上面会出现一个+1，然后在褪色时向上移动。

如何在第一个有机会消失之前单击按钮的情况下创建此+1的新实例而不删除第一个实例？

因此，如果我快速点击按钮，按钮上方会出现+ 1流，并逐渐淡出淡出。知道怎么做这个吗？

谢谢！

Answer 1

这是使用jQuery的解决方案：

t.each { k, v -> println k.getClass() } // prints: class java.lang.StringBuffer

$('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;
}