Geek asks and answers

Using Popcorn + jQuery for animation

I would like to use Popcorn.js, which seems very convenient for managing videos. Now I use the footnote method, everything works fine.

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

I want to animate a footnote created using jQuery (for example, I would like the footnote to be fadeIn / fadeOut).

How would you do it? I'm not sure if I can mix jQuery and Popcorn and I can’t find such documentation ... My only idea is to check with jQuery if there is text in my #layer div and then animate it, but I don’t sure this is a good way.

Thank!

+5
source share
2 answers

, . .style.display , .

footnote , . 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. Butter , . , , . >

+4

More articles:


All Articles