2

ボタンにonClick機能を使用しています。私のボタンコードは次のようになります。

<a onClick="fadeNext('#myDIV1',500);">Button 1</a>
<a onClick="fadeNext('#myDIV2',500);">Button 2</a>

私のJS関数は次のようになります。

function fadeNext(selectedId, speed) {

          var containerID = '#imageSwap';
          var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
          var next = $(selectedId);
          vis.fadeOut(speed);

          next.fadeIn(speed);
          }

これにより、コンテンツが正しくフェードし、正常に機能しますが、ビデオコンテンツ（Vimeo）は、表示されていない場合でも再生されます。このJSを試しましたが、まだ運がありません。

function fadeNext(selectedId, speed) {

          var containerID = '#imageSwap';
          var vis = ($(containerID + ' div:visible').length > 0) ? $(containerID + ' div:visible').eq(0) : $(containerID + ' div').eq(0);
          var next = $(selectedId);
          vis.fadeOut(speed, function() {
              $(this).empty().show();
          });

          next.fadeIn(speed);
          }

このJSを使用すると、コンテンツがフェードアウトしたり空になったりすることはなくなります。

私はJSの新人で、empty（）コードを機能させるのに問題があります。これの主な理由は、私のDIVにビデオ（Vimeo）が含まれることです。ユーザーがクリックしてコンテンツを変更したときに、ビデオをアンロードして、ビデオ/サウンドが再生されないようにしたいのですが。

どんな助け/アドバイスもいただければ幸いです！

4

1 に答える 1

0

あなたのフィドルの私のフォークをチェックしてください：http：//jsfiddle.net/tutanramen/umJQ9/16/

外部リソースへのリンクを追加しました：https ：//raw.github.com/vimeo/player-api/master/javascript/froogaloop.js

次に、各iframeにID（v1とv2ですが、このフィドルでは使用されません）とプレーヤーのクラスを指定しました。

そして、これをfadeNextに追加しました：

$(".player").each(function() {
    $f($(this)[0]).api("pause");
});

これで、クリックして他のビデオを選択すると、実際にはすべてのビデオが一時停止します。

于 2013-03-11T04:28:51.963 に答える