アニメーションボタンjQuery

Question

アニメーションボタンでこのjQuery関数を使用しようとしていますが、実際には機能していません。以下のコード

HTML

<button class="btn-rounded">Button</butto> 

CSS

.btn-rounded{ 
    color: black; 
    opacidity:.7; 
    border-radius:150px; 
    background-color:#FFF067; 
} 

JS

$("#img").addClass("animated bounce"); 

Answer 1

あなたのjsがまったくボタンをターゲットにされていないされているのではなく、要素#img。単にアクションに関係なく、ページの読み込み時にすぐに要素にクラスを追加します。

クリック時にボタンアニメーションをトリガーするには、イベントハンドラーを作成してクリックしたときにクラスにボタンを適用する必要があります。

$('button.btn-rounded').on('click', function(){ 
    $(this).addClass('animated bounce'); 
}); 

Answer 2

jQueryをスキップし、プレーンオールバニラCSSを使用するだけで済みます。

.btn-rounded { 
    color: black; 
    opacity:.7; 
    border-radius:150px; 
    background-color:#FFF067; 
    transform: translateY(0); 
    transition: transform .5s cubic-bezier(0.5, -2.5, 0.5, 3.5); 
} 

.btn-rounded:hover { 
    transform: translateY(-25%); 
} 

ここでマウスを動かすと、この悪い少年が跳ね返ります。あなたのCSSの不透明なタイプミスやHTMLのボタンのタイプミスを修正することを忘れないでください。