アニメーションのためのポップコーン+ jQueryの使用

Question

私はPopcorn.jsを使いたいと思います。 脚注のメソッドを使用していますが、すべて正常に機能しています。

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

私はjQueryの（私は例えば、フェードイン/フェードアウトに脚注をしたいと思う）で作成した脚注をアニメーション化します。

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

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

Answer 1

Popcornの脚注プラグインをそのまま使用すると、特に便利な方法はありません。脚注上の.style.displayプロパティを必要に応じて切り替えるだけで、実際にフックする方法はありません。

しかし、脚注のプラグインはシンプルなので、それをコピーして、必要な振る舞いで新しいプラグインを作成することができます。 the source of the plugin in Popcorn 1.2 からの作業、我々はちょうど彼らが代わりにフェードインとフェードアウトさせるためにいくつかの行を変更する必要があります。

(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.私はスペースを節約するためにバターマニフェストとコメントを削除しました。あなたがそれらを必要とするならば、あなたは上にリンクされた元のソースでそれらを見つけることができます。}

Answer 2

あなたも私のために働いている、.CODEプラグインを使用して、あなたのjQueryが呼び出す追加することができます。

http://popcornjs.org/popcorn-docs/plugins/#Code