我想使用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"
});
