Sử dụng Popcorn + jQuery cho hoạt ảnh

Question

Tôi muốn sử dụng Popcorn.js có vẻ rất tiện dụng để quản lý video. Tôi hiện đang sử dụng phương pháp chú thích, mọi thứ đều hoạt động tốt.

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

Tôi muốn tạo hiệu ứng chú thích được tạo bằng jQuery (ví dụ: tôi muốn chú thích để fadeIn/fadeOut).

Bạn quản lý điều đó như thế nào? Tôi không chắc liệu tôi có thể trộn jQuery và Popcorn và tôi không thể quản lý để tìm tài liệu đó ... Ý tưởng duy nhất của tôi là kiểm tra với jQuery nếu có một số văn bản bên trong div #layer của tôi và sau đó tạo hiệu ứng động nhưng Tôi không chắc đó có phải là cách hay hay không.

Cảm ơn bạn!

Answer 1

Không có cách nào đặc biệt tốt để thực hiện việc này bằng cách sử dụng plugin chú thích Popcorn. Nó chỉ chuyển đổi thuộc tính .style.display trên chú thích dưới dạng cần thiết và không có cách nào thực tế để móc điều này.

Tuy nhiên, plugin chú thích đơn giản và bạn chỉ có thể sao chép và tạo plugin mới với hành vi bạn muốn. Làm việc kể từ the source of the plugin in Popcorn 1.2 chúng ta chỉ cần thay đổi một vài dòng để làm cho chúng mờ dần trong và ngoài thay vì:

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

Bao gồm này trong dự án của bạn và bạn thiết lập. Sử dụng ví dụ của bạn (jsfiddle):

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

_{^1. tôi loại bỏ các biểu hiện Bơ và ý kiến ​​để tiết kiệm không gian. Nếu bạn cần chúng, bạn có thể tìm thấy chúng trong nguồn gốc được liên kết ở trên.}

Answer 2

Bạn cũng có thể sử dụng plugin .code và thêm jQuery của bạn gọi đó, mà làm việc cho tôi:

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