jquery 旋转最大计数

Question

看了无数的SO帖子，也做了无数的尝试，可是整整一个下午，还是卡住了。

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

我想做什么？

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

Jquery 问题

我正在使用 jquery 动画插件将录制图像旋转 30 秒，因为这是每首歌曲的长度。如果我单击一次记录并只播放一首歌曲，这对代码 below/jsfiddle 很好用。但是，如果我单击记录播放下一首歌曲，则每次单击都会添加新的 30 秒。同样，如果我等到一首歌结束，这没问题，但如果我点击，比方说，点击三次，动画长度突然增加了 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/

Answer 2

希望我没弄错：您需要对动画进行 .stop() 调用。这样，每 click 都会为你开始一首新歌和一个新动画。这是更新后的 jsFiddle：http://jsfiddle.net/mf6xed3w/2/ 持续时间更改为 3 秒，因此您可以更轻松地查看结果。

jquery 旋转最大计数

jquery rotate max count

jquery

css

css-animations

rotateanimation

jquery-rotate