Uso di Popcorn + jQuery per animazioni

Question

Vorrei utilizzare Popcorn.js che sembra molto utile per la gestione dei video. Ora sto usando il metodo della nota, tutto funziona perfettamente.

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

voglio animare la nota creata con jQuery (vorrei nota al fadeIn/fadeOut, per esempio).

Come gestirlo? Non sono sicuro di poter mixare jQuery e Popcorn e non riesco a trovare tutta quella documentazione ... La mia unica idea è controllare con jQuery se c'è del testo nel mio div #layer e poi animarlo ma Non sono sicuro se sia il modo giusto.

Grazie!

Answer 1

Non c'è un modo particolarmente carino per farlo utilizzando il plug-in di Popcorn. Commuta semplicemente la proprietà .style.display nella nota a piè di pagina e non c'è alcun modo pratico per agganciarla.

Tuttavia, il plug-in di note a piè di pagina è semplice e basta copiarlo e creare un nuovo plug-in con il comportamento desiderato. Lavorare da the source of the plugin in Popcorn 1.2 abbiamo solo bisogno di cambiare alcune linee per renderle dissolvenza in entrata e invece fuori:

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

Includi questo nel progetto e siete a posto. Usando il tuo esempio (jsfiddle):

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

_{^1. ho rimosso il manifesto e commenti burro per risparmiare spazio. Se ne hai bisogno, puoi trovarli nella fonte originale linkata sopra.}

Answer 2

È anche possibile utilizzare il plugin .code e aggiungere il tuo jQuery chiama là, che ha funzionato per me:

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