使用Popcorn + jQuery进行动画制作

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根据需要切换脚注上的属性，并且没有任何实用的方法来挂钩它。

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