Javascript clicker, щелкая анимацию

Question

Я хочу создать эффект, подобный приведенному ниже. Я имею в виду - когда я нажимаю куки, на экране появляется небольшое «+1.0». Я знаю, как сделать это только для одного «+1.0», но как насчет нескольких кликов и нескольких «+1.0»? Например, продолжительность анимации() составляет 2000 мс, и я нажимаю 4 раза за 2000 мс. Как я могу заставить его показывать 4x «+1.0», а не только один?

http://orteil.dashnet.org/cookieclicker/

Answer 1

Заканчивать этот fiddle.

Он использует @keyframes-animation для достижения желаемого эффекта.

Его не совсем то, что вы хотите, но если заданное время поможет вам решить вашу проблему.

Это фрагмент.

var x = 0; 
 
$("#cookie").click(function(e) { 
 
    x++; 
 
    $("#cookie").append('<div id="x' + x + '" hidden>+1.0</div>'); 
 
    $("#x" + x).css("top", e.clientY); 
 
    $("#x" + x).css("left", e.clientX - 10); 
 
    $("#x" + x).css("position", "absolute"); 
 
    $("#x" + x).css("width", "25px"); 
 
    $("#x" + x).css("height", "25px"); 
 
    $("#x" + x).css("color", "white"); 
 
    $("#x" + x).css("font-weight", "bold"); 
 
    $("#x" + x).css("animation", "GoUp 2s forwards linear"); 
 
    $("#x" + x).show(); 
 
});

#cookie { 
 
    background: red; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
@keyframes GoUp { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    top: 0px; 
 
    opacity: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="cookie"> 
 

 
</div>