動畫鼠標事件不起作用

document.getElementById("both-gif").onmouseover=function() {MouseOver()}; 

document.getElementById("both-gif").onmouseout=function() {MouseOut()}; 



function MouseOver() { 
    document.getElementById("both-gif").addClass("animated bounce") 
} 

function MouseOut() { 
    document.getElementById("both-gif").removeClass("animated bounce") 
}

我試圖讓我的gif圖像反彈，它有id「both-gif」。我究竟做錯了什麼？動畫鼠標事件不起作用

來源

2017-08-06 Shaky Edits

我們不知道沒有你的HTML和CSS。請點擊'<>'並創建一個[mcve] - 但第一個錯誤是在DOM元素 – mplungjan

document.getElementById("both-gif").addClass("animated bounce")

這裏addClass是一個jQuery函數。它不會在JavaScript中工作。

你不能鏈jQuery的功能與document.getElementById 您需要將其更改爲

document.getElementById("both-gif").classList.add("animated","bounce")

而且這條線

document.getElementById("both-gif").removeClass("animated bounce")

到

document.getElementById("both-gif").classList.remove("animated","bounce")

來源

2017-08-06 17:15:14

上使用jQuery感謝指點。沒有我的錯誤。它需要一個逗號分隔列表 –

只有較新的瀏覽器和[不是IE]（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility）支持添加多個參數。他們需要逗號分隔 - 我看到你的更新。 – mplungjan

動畫鼠標事件不起作用

回答

相關問題