Uso de Popcorn + jQuery para animaciones

Question

Me gustaría utilizar Popcorn.js que parece muy útil para administrar videos. Ahora estoy usando el método de nota al pie, todo está funcionando bien.

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

Quiero animar la nota creada con jQuery (me gustaría que la nota al fadeIn/fadeOut, por ejemplo).

¿Cómo lo manejarías? No estoy seguro de si puedo mezclar jQuery y Popcorn y no puedo encontrar tanta documentación ... Mi única idea es consultar con jQuery si hay algún texto dentro de mi div #layer y luego animarlo pero No estoy seguro si es el buen camino.

¡Gracias!

Answer 1

No hay una manera particularmente agradable de hacerlo utilizando el complemento de notas al pie Popcorn tal como está. Simplemente cambia la propiedad .style.display en la nota al pie como sea necesario, y no hay ninguna forma práctica de enganchar esto.

Sin embargo, el complemento de la nota al pie es simple y puede copiarlo y crear un nuevo complemento con el comportamiento que desee. Trabajando a partir de the source of the plugin in Popcorn 1.2 sólo tenemos que cambiar unas pocas líneas para hacerlos aparecen y desaparecen en su lugar:

(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); 

incluir esto en su proyecto y ya está. Usando su ejemplo (jsfiddle):

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

_{^1. Quité el manifiesto y comentarios mantequilla para ahorrar espacio. Si los necesita, puede encontrarlos en la fuente original vinculada anteriormente.}

Answer 2

También es posible usar el plugin .code y añadir su jQuery llama allí, que trabajó para mí:

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