4

私は数え切れないほどのSOの投稿を読み、何度も試みましたが、午後になってもまだ立ち往生しています。

私が使用しているjqueryプラグインと組み合わせた私のコードは、このjsfiddleでここで見ることができます

私は何をしようとしていますか？

このプロジェクトでは、指定されたアーティストの曲のリストを提供する iTunes API を呼び出しています。次に、これらの mp4a ファイル (一例) を配列に格納し、レコードの画像がクリックされるたびに (jsfiddle を参照)、配列内の次の曲/アイテムが再生されます。これらのスニペットはそれぞれ 30 秒です。これはうまくいきます。

Jquery の問題

jquery アニメーション プラグインを使用して、各曲の長さである 30 秒間レコード イメージを回転させます。これは、レコードを 1 回クリックして 1 曲だけ再生すると、以下のコード/jsfiddle で正常に動作します。ただし、レコードをクリックして次の曲を再生すると、クリックするたびに新しい 30 秒が追加されます。繰り返しますが、これは曲の終わりまで待っていれば問題ありませんが、3 回クリックすると、アニメーションの長さに突然 90 秒が追加されます。

カウントが 30 を超えないようにするために、誰か助けてもらえますか? あらゆる種類の if/else ステートメントを試しましたが、残念ながらクラックできません。また、jquery 回転プラグイン コードを細かい歯のくしで調べて、そこにあるコードの一部を変更しようとしましたが、役に立ちませんでした。

現在、私の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と、ローテーションに残っていることをすべて実行するのに 1 秒かかるため、ローテーションが終了する直前にクリックすると奇妙に見えます。これをオンまたはオフにして試してみて、違いを確認してください。

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

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

于 2015-05-02T19:55:47.720 に答える
2

私はそれが正しかったことを願ってい.stop()ます.あなたはあなたのアニメーションについて電話する必要があります. このようにして、everyclickは新しい曲と新しいアニメーションを開始します。更新された jsFiddle は次のとおりです: http://jsfiddle.net/mf6xed3w/2/期間が 3 秒に変更されたため、結果を簡単に確認できます。

于 2015-05-02T19:56:32.547 に答える