使用爆米花+ jQuery動畫

Question

我想使用Popcorn.js，它似乎非常方便管理視頻。 我現在使用腳註方法，一切工作正常。

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

我想動畫使用jQuery（我想腳註淡入/淡出，例如）創建的註腳。

您將如何管理？我不確定是否可以混合使用jQuery和Popcorn，並且我無法找到那麼多文檔... 我唯一的想法是使用jQuery進行檢查，如果我的#layer div中有一些文本，然後對其進行動畫但我不確定這是否是好方法。

謝謝！

Answer 1

沒有一個特別好的方式來使用Popcorn腳註插件。它只需在腳註上切換.style.display屬性，並且沒有任何實際的方法來鉤住它。

但是，腳註插件很簡單，您可以將其複製並製作一個具有所需行爲的新插件。從the source of the plugin in Popcorn 1.2 工作，我們只需要改變幾行，使他們淡入淡出，而不是：

(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, 
    end: 6, 
    text: "Pop!", 
    target: "target" 
}); 

_{^1.我刪除了黃油清單和評論，以節省空間。如果你需要它們，你可以在上面鏈接的源文件中找到它們。}

Answer 2

您也可以使用.CODE插件，並添加您的jQuery的電話那裏，爲我工作：

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