Animation để thêm phần tử DOM với jQuery

Question

Tại thời điểm tôi đang bổ sung thêm các yếu tố để một trang trên một sự kiện click sử dụng after. Tôi muốn tạo hiệu ứng này theo cách nào đó để các yếu tố mới không đột nhiên xuất hiện từ hư không.

Tôi không làm phiền gì phương pháp hoạt hình được sử dụng miễn là nó thể hiện cho người dùng những gì đang xảy ra khi họ nhấn chuột.

Tôi chưa bao giờ sử dụng hoạt ảnh trong jQuery trước đây và chỉ thực sự tìm thấy các ví dụ để làm việc với các phần tử DOM hiện có. Mô hình nào nên được sử dụng để tạo hoạt ảnh cho việc tạo các phần tử mới trong jQuery?

Answer 1

Những gì tôi đã làm trong quá khứ là chèn zero-kích thước placeholder-divs tại điểm mà tôi muốn chèn yếu tố mới của tôi.

Tôi sau đó tạo hiệu ứng giữ chỗ cho kích thước mình muốn, sau đó chèn ẩn phiên bản của phần tử tôi muốn hiển thị bên trong trình giữ chỗ và làm mờ nó thành chế độ xem.

Khi fade-in xong tôi unwrap 'giữ chỗ để xoá bỏ nó, sử dụng đoạn mã sau:

// Essentially, this does the opposite of jQuery.wrap. Here is an example: 
    // 
    //  jQuery('p').wrap('<div></div>'); 
    //  jQuery('p').parent().unwrap().remove(); 
    // 
    // Note that it is up to you to remove the wrapper-element after its 
    // childNodes have been moved up the DOM 
    jQuery.fn.unwrap = function() { 
     return this.each(function(){ 
      jQuery(this.childNodes).insertBefore(this); 
     }); 
    }; 

Tất cả các tính năng hoạt hình jQuery có xử lý 'onComplete' cho phép bạn kick-off khác nhau các phần của hoạt ảnh khi chúng được hoàn thành, do đó, không quá nhiều việc vặt để đạt được tất cả điều này.

Ngoài ra, nó rất hữu ích để giữ một mô hình JavaScript của tất cả các yếu tố của bạn thay vì dựa vào chậm DOM-traversal và phương pháp jQuery .data().

Answer 2

Một đơn giản fadeIn thường hoạt động tốt.

Answer 3

Bạn có thể làm một cái gì đó như:

...click(function() { 
    $(...).hide().appendTo(...).fadeIn(); 
} 

Answer 4

Hãy thử một cái gì đó như thế này:.

$("selector").hide().fadeIn(1000); 

nơi 1000 là tốc độ trong đó mặt hàng có thể phai nhạt trong tôi đặt hide() trong đó giả sử rằng phần tử DOM mới hiển thị khi được tạo, không chắc chắn có cần hay không. Điều tốt nhất cần làm là đặt "display: none" trên phần tử mới khi bạn tạo nó và sau đó chỉ cần sử dụng fadeIn().

Có tác dụng khác mà bạn có thể sử dụng quá như slideUp/slideDown vì vậy bạn có thể muốn xem xét những người quá.

Answer 5

Bạn có thể thực hiện bất kỳ hoạt ảnh nào. Bạn có thể đi cho một đơn giản show

$("#element").show("slow") // or "normal" or "fast" 
// or 
$("#element").show(1000) // 1000 milliseconds 

Hoặc như đề xuất trước đây, fadeIn. Một lần nữa bạn có thể quyết định tốc độ - như trong show. Hoặc bạn có thể sử dụng hoạt ảnh tùy chỉnh.

$("#element").animate({ 
    opacity: 1, // Will fade the object in 
    fontSize: "14px", // Will animate the font size too 
}, 1000); // 1000 milliseconds 

Go here cho tài liệu hiệu ứng jQuery.