Question

我试图用JS创建简单的点击游戏，我想给我的游戏一些动画。一点＆＃34; $ + 1＆＃34;每当我点击按钮时，应该动画到顶部并消失。它可以工作，但只需点击一下。

＆＃13;

$("#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"
	});


});

＆＃13;

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

＆＃13;

Answer 1

尝试在css bottom的{{1}}重置#fading_dolar 0px complete至.animate()

＆＃13;

$("#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")
    }
  });


});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您之后的效果不是很清楚，但您的代码段中有一些错误：

你没有包含jQuery。
你有一个处理程序附加到不存在的标记的click事件（并且因为你从代码中附加事件而不需要）。
你的代码首先将动画设置为0部分，然后设置初始状态（不透明度1）。
您每次都不需要设置显示属性。

尝试这个固定小提琴

＆＃13;

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

＆＃13;

#fading_dolar {
  display: block;
  position: relative;
}

＆＃13;

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

＆＃13;

编辑：还有其他一些错误/错误。 "bottom:":是错误的，你应该重新开始＃34;从0px，而不是60px。还将基本样式移动到CSS（不需要代码），并添加了所需的＆＃34;位置：relative＆＃34;属性。

Answer 3

你需要把：

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

在complete选项中，因为这是一个动画完成后调用的函数。请参阅有关animate的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"
        });
    }});
});

DEMO

Answer 4

您应该使用回调函数和.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"
      });
    });   
});

在jquery

4 个答案: