Question

我想使用Popcorn.js，这对于管理视频来说非常方便。我现在正在使用脚注方法，一切正常。

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

我想用jQuery创建脚注的动画（例如，我希望脚注为fadeIn / fadeOut）。

你会如何管理？我不确定我是否可以混合jQuery和Popcorn，我无法找到那么多文档...... 我唯一的想法是检查jQuery是否在我的#layer div中有一些文本然后设置动画但是我不确定它是否是好方法。

谢谢！

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。我删除了Butter清单和注释以节省空间。如果您需要它们，您可以在上面链接的原始资源中找到它们。}

Answer 2

你也可以使用.code插件并在那里添加你的jQuery调用，这对我有用：

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

使用Popcorn + jQuery进行动画制作

2 个答案: