Jqueryアニメーションが毎回発生するようにクリックします

Question

アニメーションCSSでアニメーションを作成するボタンがいくつかありますが、アニメーションは1回だけ発生するという問題があります。ボタンをクリックするたびにアニメーションを発生させたいと思います。コード：

HTML：

<div> 
    <button id="one"> Button 1</button> 
    <button id="two"> Button 2</button> 
    <button id="three"> Button 3</button> 
    <button id="four"> Button 4</button> 
    <button id="five"> Button 5</button> 
    <button id="six"> Button 6</button> 
</div> 

JS：

$("#two").click(function(){ 
    $("#two").addClass("animated bounce") 
}); 

Answer 1

あなたはアニメーションが終了した後の要素からクラスを削除する必要があります。少なくともそれはdemo siteで起こっています。 ...これを試してみてください

$('selector').click(function(){ 
 
    $(this).addClass("whatever animation class"); 
 
    setTimeout(function(){ 
 
      $('selector').removeClass("whatever animation class"); 
 
    }, 2000); //2000 is the time it takes in milli seconds for the animation to run once. 
 
}); 
 

 

 

 
//Here is how he does it on the website... 
 

 
    $('#selector').removeClass().addClass('animation class').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
 
     $(this).removeClass(); 
 
    });

**編集** 彼は、それは私のオリジナルのアイデアその後、きれいでない方法。この方法では、アニメーションのランタイムの秒を推測する必要はありません。とても清潔です。