爆米花的使用+；用于动画的jQuery

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

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

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

你会怎么做？我不确定我是否可以混合使用jQuery和爆米花，我无法找到那么多文档。。。 我唯一的想法是使用jQuery检查我的#layer div中是否有一些文本，然后设置动画，但我不确定这是否是一种好方法

---

谢谢大家!

现在使用爆米花脚注插件没有特别好的方法来实现这一点。它只是根据需要切换脚注上的

.style.display

属性，没有任何实用的方法来钩住它

然而，脚注插件很简单，你可以复制它，然后用你想要的行为创建一个新的插件。从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 );

---

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

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

---

太棒了。这是伟大的作品，现在我可以自定义它自己，如果需要的话。谢谢你的帮助。顺便说一句-有关于图像动画的提示吗？不要介意图像动画，我添加了选项。_container.innerHTML=“”在第7行）

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