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

Question

我试图用JS创建简单的答题器游戏，我想给我的游戏一些动画。 一个小小的“$ + 1”应该在顶部生成动画，并且每次点击按钮时都会消失。它的工作原理，但只有一次点击。

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

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

 

 
});

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

Answer 1

尝试在complete复位的#fading_dolarcssbottom到0px.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

你后的效果也不是很清楚，但有一对夫妇在你的代码段错误：

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

试试这个固定的小提琴

$("#clicker").click(function(){ 
 
\t $("#fading_dolar").css({ 
 
\t \t bottom: "0px", 
 
\t \t opacity: 1 
 
\t }); \t $("#fading_dolar").animate({ 
 
\t \t bottom: "120px", 
 
\t \t opacity: 0 
 
\t }, {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">+$1</span></center>

编辑：还有几个其他错误/错误出现。 "bottom:":是错误的，你应该从0px开始，而不是60px。还将基本样式移至CSS（不需要代码），并添加了所需的“position：relative”属性。

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

您应该使用回调函数和queue: false.stop()代替：

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