jQuery旋转最大计数答案

【问题标题】：jquery rotate max countjQuery旋转最大计数
【发布时间】：2015-05-02 19:31:44
【问题描述】：

我已经阅读了无数的SO帖子并进行了无数次尝试，但是一整个下午后我仍然卡住了。

我的代码和我正在使用的 jquery 插件可以在这个 jsfiddle 上看到 here

我想做什么？

对于这个项目，我正在调用 iTunes API，它为我提供了一个指定艺术家的歌曲列表。然后，我将这些 mp4a 文件 (one example) 存储在一个数组中，每次单击记录图像（参见 jsfiddle）时，都会播放数组中的下一首歌曲/项目。这些 sn-ps 中的每一个都是 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">

【问题讨论】：

标签： jquery css css-animations rotateanimation jquery-rotate

【解决方案1】：

您可以使用 jQuery 内置的 .stop( [clearQueue ] [, jumpToEnd ] ) 方法在使用 rotate 插件开始新动画之前停止动画。将clearQueue 设置为true 将阻止在停止当前动画后运行任何额外的动画，设置jumpToEnd 将阻止它在中途启动动画。如果没有jumpToEnd，它仍然会尝试花一秒钟的时间来完成旋转中剩下的任何事情，如果您在它完成旋转之前单击它会看起来很奇怪 - 尝试打开或关闭它以查看差异。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：