jquery повернуть максимальное количество

Я прочитал бесчисленные сообщения 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">
Источник

2 ответа

Решение

Вы можете использовать встроенный в jQuery .stop( [clearQueue ] [, jumpToEnd ] ) метод, чтобы остановить анимацию, прежде чем начать новую, используя rotate плагин. настройка clearQueue в true предотвратит запуск дополнительных анимаций после остановки текущей и настройки jumpToEnd предотвратит запуск анимации в середине потока. Без jumpToEnd он по-прежнему будет пытаться занять целую секунду, чтобы сделать то, что осталось во вращении, что будет выглядеть странно, если вы щелкнете непосредственно перед тем, как завершит вращение - попробуйте поэкспериментировать с этим включенным или выключенным, чтобы увидеть разницу.

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

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

Источник

Надеюсь, я правильно понял: вам нужна .stop() вызовите свою анимацию. Таким образом, каждый click начнет новую песню и новую анимацию для вас. Вот обновленный jsFiddle: http://jsfiddle.net/mf6xed3w/2/ с продолжительностью, измененной на 3 секунды, чтобы вы могли легче увидеть результат.

Источник
Другие вопросы по тегам