使用Popcorn jQuery进行动画制作

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

使用Popcorn脚注插件原样没有特别好的方法.它只是在脚注上切换脚注中的.style.display属性,并没有任何实用的方法来挂钩它.

但是,脚注插件很简单,你可以复制它并使用你想要的行为制作一个新的插件.从the source of the plugin in Popcorn 1.21开始工作,我们只需更改几行就可以淡入淡出：

(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,target: "target"
});

我删除了Butter清单和注释以节省空间.如果您需要它们,您可以在上面链接的原始资源中找到它们.