在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

尝试将css bottom of #fading_dolar重置为0px at complete of .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>

​

Answer 2

你需要把：

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

在complete选项中，因为这是动画完成后要调用的函数。参见关于jQuery 动画制作的文档。

您的代码应该是：

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

演示

Answer 3

您应该使用回调函数和.stop()而不是queue: false。

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