在 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">+</span></center>

Answer 1

您想要的效果不是很清楚，但是您的代码片段中有几个错误：

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

试试这个修复 fiddle

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

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

<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">+</span></center>

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

Answer 2

您需要输入：

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

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

您的代码应该是：

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

Answer 4

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

的 0px

$("#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">+</span>
</center>

在 jquery 中每次点击都会启动新动画

Launch new animation with every click in jquery

javascript

jquery

jquery-animate