Utilisation de Popcorn + jQuery pour les animations

Question

Je voudrais utiliser Popcorn.js qui semble très pratique pour gérer les vidéos. J'utilise maintenant la méthode de la note de bas de page, tout fonctionne bien.

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

Je veux animer la note de bas de page créée à l'aide de jQuery (je voudrais que la note de bas de page s'ouvre et se ferme en fondu, par exemple).

Comment allez-vous gérer cela ? Je ne suis pas sûr de pouvoir mélanger jQuery et Popcorn et je n'arrive pas à trouver autant de documentation... Ma seule idée est de vérifier avec jQuery s'il y a du texte à l'intérieur de ma div #layer et ensuite de l'animer mais je ne suis pas sûr que ce soit la bonne méthode.

Merci !

Answer 1

Il n'y a pas de moyen particulièrement agréable de le faire en utilisant le plugin Popcorn footnote tel quel. Il suffit de basculer l'élément .style.display sur la note de bas de page si nécessaire, et il n'y a pas de moyen pratique de l'accrocher.

Cependant, le plugin footnote est simple et vous pouvez simplement le copier et créer un nouveau plugin avec le comportement que vous souhaitez. Travailler à partir de la source du plugin dans Popcorn 1.2 1 nous devons juste changer quelques lignes pour qu'ils s'affichent et disparaissent à la place :

(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 );

Incluez-le dans votre projet et vous êtes prêt. En utilisant votre exemple ( jsfiddle ):

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

_{^1.J'ai supprimé le manifeste du beurre et les commentaires pour gagner de la place. Si vous en avez besoin, vous pouvez les trouver dans la source originale liée ci-dessus.}

Answer 2

Vous pouvez également utiliser le plugin .code et y ajouter vos appels jQuery, cela a fonctionné pour moi :

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