4

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

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

我想做什么？

对于这个项目，我正在调用 iTunes API，它为我提供了一个指定艺术家的歌曲列表。然后，我将这些 mp4a 文件（一个示例）存储在一个数组中，每次单击记录图像（参见 jsfiddle）时，都会播放数组中的下一首歌曲/项目。这些片段中的每一个都是 30 秒。这工作正常。

jQuery 问题

我正在使用 jquery 动画插件将记录图像旋转 30 秒，因为这是每首歌曲的长度。如果我单击记录一次并且只播放一首歌曲，这适用于下面的代码/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">
4

2 回答 2

2

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

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

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

于 2015-05-02T19:55:47.720 回答
2

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

于 2015-05-02T19:56:32.547 回答