在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" 
     }); 
    }); 
});