動畫按鈕jQuery

我想在動畫按鈕上使用這個jQuery函數並不真正工作，我可以獲得幫助嗎？下面是代碼動畫按鈕jQuery

HTML

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

CSS

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

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

來源

2017-02-02 Jansen Mendonça

你的jQuery引用'＃img'不存在，只是調用addClass。你想要實現什麼樣的動畫？請儘可能具體。哦，你拼錯'不透明' –

什麼是不工作？請告訴我們你的期望。 –

該按鈕的結束標籤應該是''，而不是''。 –

你的JS是不是在所有指定的按鈕，而是一個元素#img。除此之外，它只是在頁面加載時立即將這些類添加到元素中，而無需採取行動。

要在點擊時觸發按鈕動畫，您需要創建一個事件處理程序，以在單擊時將類應用於按鈕。

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

來源

2017-02-02 02:24:22 dommmm

你可以跳過jQuery並使用普通的ol香草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中的按鈕錯字。

來源

2017-02-02 02:29:07 Jef

動畫按鈕jQuery

回答

相關問題