的onclick旋轉（動畫）沒有發生

Question

我有一個關於我有一個小問題，我已經在這裏勾勒問題：http://jsfiddle.net/gm3mG/1/

我想旋轉箭頭這是<span id="rotator">，但我不能讓它起作用。我究竟做錯了什麼？

編輯：

我的第二個問題：我怎樣才能讓它在被點擊後，旋轉箭頭1秒後回來？

Answer 1

首先，您使用的是jQuery而不是Mootools，因此您必須相應地配置jsFiddle（請參閱左窗格中的Choose Framework部分）。

其次，CSS轉換不適用於內聯元素，並且<span>元素默認爲內聯。造型與display: inline-block解決您的問題。

你會發現更新的小提琴here。

編輯：關於您的問題的第二部分，規範的答案是使用window.setTimeout()。但是，您也可以使用jQuery的動畫設施，如delay()和queue()來達到同樣的效果：

$("#rotator").addClass("lol").delay(1000).queue(function(next) { 
    $(this).removeClass("lol"); 
    next(); 
}); 

您可以測試這個解決方案here。

Answer 2

我會首先確保.lol類首先工作。只需將其應用於跨度＃旋轉開始即可。我試着在小提琴和它的不工作開始，更不用說JavaScript動態地添加類到它...

Answer 3

該transform property只適用於transformable elements，其中您的<span>不是其中之一。