使用 Popcorn + jQuery 制作动画答案

【问题标题】：Use of Popcorn + jQuery for animations使用 Popcorn + jQuery 制作动画
【发布时间】：2012-05-16 06:54:25
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： jquery html animation video popcornjs

【解决方案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 清单和 cmets 以节省空间。如果您需要它们，您可以在上面链接的原始源中找到它们。}

【讨论】：

太棒了。这很好用，现在我可以根据需要自己定制它。感谢您的帮助。
顺便说一句 - 动画图像的任何提示？
不要介意图像动画，我在第 7 行添加了 options._container.innerHTML = ""）

【解决方案2】：

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

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

【讨论】：