5

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

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

我想为使用 jQuery 创建的脚注设置动画（例如，我希望脚注淡入/淡出）。

你将如何管理它？我不确定我是否可以混合使用 jQuery 和 Popcorn，而且我找不到那么多文档……我唯一的想法是用 jQuery 检查我的#layer div 中是否有一些文本，然后对其进行动画处理，但我'不确定这是否是好方法。

谢谢！

4

2 回答 2

4

按原样使用 Popcorn 脚注插件并没有特别好的方法。它只是根据需要切换.style.display脚注上的属性，并且没有任何实用的方法来挂钩它。

但是，脚注插件很简单，您可以复制它并制作一个具有您想要的行为的新插件。从 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 清单和注释以节省空间。如果您需要它们，您可以在上面链接的原始源中找到它们。

于 2012-05-07T20:57:41.277 回答
0

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

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

于 2013-05-01T23:45:14.323 回答