使用Popcorn jQuery进行动画制作

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

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

我想动画用jQuery创建的脚注(例如,我希望脚注为fadeIn / fadeOut).

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

谢谢！

最佳答案

使用Popcorn脚注插件原样没有特别好的方法.它只是在脚注上切换脚注中的.style.display属性,并没有任何实用的方法来挂钩它.

但是,脚注插件很简单,你可以复制它并使用你想要的行为制作一个新的插件.从the source of the plugin in Popcorn 1.21开始工作,我们只需更改几行就可以淡入淡出：

(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,target: "target"
});

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

原文地址：https://www.jb51.cc/jquery/428075.html