Używanie Popcorn + jQuery do animacji

Question

Chciałbym użyć Popcorn.js, który wydaje się bardzo przydatny do zarządzania filmami. Używam teraz metody przypisu, wszystko działa poprawnie.

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

Chcę animować przypis utworzony z jQuery (chciałbym przypis do fadeIn/fadeOut, na przykład).

Jak byś to zrobił? Nie jestem pewien, czy mogę mieszać jQuery i Popcorn i nie uda mi się znaleźć tak dużej dokumentacji ... Jedynym moim pomysłem jest sprawdzenie z jQuery, czy jest jakiś tekst wewnątrz mojego div #layer, a następnie animacja go, ale Nie jestem pewien, czy to jest dobra droga.

Dziękujemy!

Answer 1

Nie jest to szczególnie dobry sposób, aby to zrobić za pomocą wtyczki Popcorn wtyczki, jak jest. Po prostu przełącza właściwość .style.display na przypisie jako niezbędny, i nie ma żadnego praktycznego sposobu na złapanie tego.

Jednak wtyczka przypisu jest prosta i można ją po prostu skopiować i utworzyć nową wtyczkę z zachowaniem, które chcesz. Praca z the source of the plugin in Popcorn 1.2 musimy tylko zmienić kilka linii, aby uczynić je znikają i obecnie zamiast:

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

uwzględnienie tego w projekcie i jesteś ustawiony. Korzystanie z przykładu (jsfiddle):

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

_{^1. usunąłem manifestu masło i komentarzy w celu zaoszczędzenia miejsca. Jeśli ich potrzebujesz, możesz je znaleźć w oryginalnym źródle połączonym powyżej.}

Answer 2

Można również użyć wtyczki .code i dodać jQuery zwraca tam, że pracował dla mnie:

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