5

動画の管理にとても便利そうなPopcorn.jsを使いたいと思っています。現在、脚注メソッドを使用していますが、すべて正常に動作しています。

     example.footnote({
       start: 2,
       end: 6,
       text: "Pop!",
       target: "layer"
     });

jQuery で作成した脚注をアニメーション化したい (たとえば、脚注をフェードイン/フェードアウトしたい)。

どうやってそれを管理しますか？jQuery と Popcorn を混在させることができるかどうかはわかりませんが、それほど多くのドキュメントを見つけることができません...私の唯一のアイデアは、#layer div 内にテキストがあるかどうかを jQuery で確認してからアニメーション化することですが、私はそれが良い方法かどうかはわかりません。

ありがとうございました！

4

2 に答える 2

4

Popcorn脚注プラグインをそのまま使用してこれを行うための特に優れた方法はありません。.style.display必要に応じて脚注のプロパティを切り替えるだけで、これをフックする実用的な方法はありません。

ただし、脚注プラグインは単純であり、それをコピーして、必要な動作で新しいプラグインを作成できます。Popcorn 1.2 1のプラグインのソースから作業する場合、代わりに数行を変更してフェードインおよびフェードアウトさせる必要があります。

(function ( Popcorn ) {
  Popcorn.plugin( "footnoteAnimated", { // <---
  _setup: function( options ) {

    var target = document.getElementById( options.target );

    options._container = document.createElement( "div" );
    options._container.style.display = "none";
    options._container.innerHTML  = options.text;

    if ( !target && Popcorn.plugin.debug ) {
      throw new Error( "target container doesn't exist" );
    }
    target && target.appendChild( options._container );
  },

  start: function( event, options ){
    $( options._container ).fadeIn(); // <---
  },

  end: function( event, options ){
    $( options._container ).fadeOut(); // <---
  },
  _teardown: function( options ) {
    document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options._container );
  }
});

})( Popcorn );

これをプロジェクトに含めると、設定が完了します。あなたの例（jsfiddle）を使用して：

Popcorn("#video").footnoteAnimated({
  start: 2,
  end: 6,
  text: "Pop!",
  target: "target"
});

1.スペースを節約するために、バターマニフェストとコメントを削除しました。それらが必要な場合は、上記のリンク先の元のソースで見つけることができます。

于 2012-05-07T20:57:41.277 に答える