Javascript 唱首歌，点击动画

Question

我想创建如下所示的效果。我的意思是——当我点击 cookie 时，屏幕上会出现一点“+1.0”，然后逐渐消失。我知道如何只为一个“+1.0”制作它，但是多次点击和多个“+1.0”呢？例如，animate() 持续时间为 2000 毫秒，我每 2000 毫秒点击 4 次。我怎样才能让它显示 4 个“+1.0”，而不是一个？

http://orteil.dashnet.org/cookieclicker/

Answer 1

看看这个 fiddle。

它使用@keyframes-animation来达到预期的效果。

这不是您想要的，但如果有时间，这将帮助您解决问题。

这是片段。

var x = 0;
$("#cookie").click(function(e) {
  x++;
  $("#cookie").append('<div id="x' + x + '" hidden>+1.0</div>');
  $("#x" + x).css("top", e.clientY);
  $("#x" + x).css("left", e.clientX - 10);
  $("#x" + x).css("position", "absolute");
  $("#x" + x).css("width", "25px");
  $("#x" + x).css("height", "25px");
  $("#x" + x).css("color", "white");
  $("#x" + x).css("font-weight", "bold");
  $("#x" + x).css("animation", "GoUp 2s forwards linear");
  $("#x" + x).show();
});

#cookie {
  background: red;
  width: 300px;
  height: 300px;
}
@keyframes GoUp {
  0% {
    opacity: 1;
  }
  100% {
    top: 0px;
    opacity: 0;
  }
}

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

</div>

Javascript 唱首歌，点击动画

Javascript clicker, clicking animation

javascript

jquery

click