jquery 旋转最大计数

Question

翻阅了无数SO帖子，尝试了无数次，但整整一个下午，我还是卡住了。

我的代码，结合我使用的jquery插件可以看到here在这个 jsfiddle

我想做什么？

对于这个元素，我正在调用 iTunes API，它为我提供了一个指定艺术家的歌曲列表。然后我将这些 mp4a 文件 ( one example ) 存储在一个数组中，每次单击记录图像时(请参阅 jsfiddle)播放数组中的下一首歌曲/元素。这些片段中的每一个都是 30 秒。这很好用。

Jquery 问题

我正在使用 jquery 动画插件将录制图像旋转 30 秒，因为这是每首歌曲的长度。如果我单击一次记录并且只播放一首歌曲，这与下面的代码/jsfiddle 一起工作得很好。但是，如果我单击记录播放下一首歌曲，则每次单击都会添加新的 30 秒。同样，如果我等到一首歌结束这没问题，但如果我点击，比方说，点击 3 次，动画长度会突然增加 90 秒。

有没有人能帮助我确保计数不能大于 30？我尝试了各种 if/else 语句，但令人失望的是无法破解它。另外，我仔细检查了 jquery rotate 插件代码，并尝试更改其中的一些代码，但也无济于事。

目前我的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/