javascript - 在 jquery 中每次单击都会启动新动画

Question

我正在尝试使用 JS 创建简单的唱首歌游戏，并且我想为我的游戏添加一些动画。 每次单击按钮时，一点“$+1”应该动画到顶部并淡出。它可以工作，但只能单击一次。

$("#clicker").click(function(){
	$("#fading_dolar").css("display","block");
	$("#fading_dolar").animate({
		bottom: "120px",
		opacity: 0
	}, {duration:1000, queue: false});

	$("#fading_dolar").css({
		"opacity": "1",
		"bottom:": "60px"
	});


});

<button id="clicker" onclick="click_f()">Click!</button>
	<center><span id="fading_dolar">+$1</span></center>

Answer 1

尝试将 #fading_dolar 的 css bottom 重置为 0px at complete .animate()

$("#clicker").click(function() {
  var el = $("#fading_dolar");
  el.finish().css("opacity", 1).animate({
    bottom: "120px",
    opacity: 0
  }, {
    duration: 1000,
    queue: false,
    complete:function() {
      $(this).css("bottom", "0px")
    }
  });


});

#fading_dolar {
  display: block;
  position: relative;
  bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="clicker">Click!</button>
<center><span id="fading_dolar">+$1</span>
</center>