jquery rotate max count

Question

我已經閱讀了無數SO帖子，並做了無數嘗試，但整個下午後我仍然卡住了。

我的代碼，與我使用可以看出here這的jsfiddle

什麼是我想要做的jQuery插件結合起來呢？

對於這個項目，我打電話給iTunes API，它爲我提供了一個指定藝術家的歌曲列表。然後，我將這些mp4a文件（one example）存儲在一個數組中，並且每次單擊錄製圖像（請參閱jsfiddle）時，都會播放陣列中的下一首歌曲/項目。這些片段中的每一個都是30秒。這工作正常。

jQuery的問題

我使用jQuery插件動畫旋轉30秒記錄的圖像，因爲這是長度每首歌曲。如果我單擊一次記錄並僅播放一首歌曲，這可以正常工作，如下面的代碼/ jsfiddle。但是，如果點擊記錄播放下一首歌曲，每次點擊都會添加一個新的30秒。再說一遍，如果我等到歌曲結束，這是沒有問題的，但如果我點擊三次，所有突然的90秒都會被添加到動畫長度中。

有人能夠幫助我確保計數不能超過30嗎？我嘗試了各種if/else語句，但令人失望的是無法破解它。此外，我已經通過jquery旋轉插件代碼與一個罰款牙梳，並試圖改變那裏的一些代碼，但也無濟於事。

目前我jQuery代碼如下所示，它與插件代碼合併：

$(document).ready(function() { 
      $('#btn').click(function(){ 
      $(this).rotate({ count:30, forceJS:true });     
     }); 
    }); 

HTML

<img src="http://www.entertainmentayr.com/joey_Lawrence_files/entertayr%20gold%20record%20LP%20logo%20small%20.png" id="btn"> 

Answer 1

您可以使用jQuery的內置.stop([clearQueue ] [, jumpToEnd ])方法，然後再開始停止動畫一個使用rotate插件的新插件。將clearQueue設置爲true將阻止在停止當前動畫之後運行任何額外的動畫，並且設置jumpToEnd將阻止其在中途啓動動畫。如果沒有jumpToEnd，它仍會嘗試花費一整秒來完成旋轉中留下的任何內容，如果在旋轉完成之前單擊它會看起來很奇怪 - 嘗試嘗試打開或關閉以查看其差異。

$(this).stop(true, true).rotate({ count: 30, forceJS: true }); 

http://jsfiddle.net/mf6xed3w/1/

Answer 2

我希望我猜中了：你需要在你的動畫.stop()電話。這樣，每個click都會爲你開始一首新歌和一個新動畫。 這是更新的jsFiddle：http://jsfiddle.net/mf6xed3w/2/，持續時間更改爲3秒，以便您可以更輕鬆地看到結果。