Nối một phần tử có hiệu ứng mờ dần [jQuery]

121

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

Điều này dường như không hoạt động.

Tôi chỉ muốn có một hiệu ứng tuyệt vời khi nội dung được thêm vào.

Lưu ý: Tôi chỉ muốn div "blah" mới mờ dần, không phải toàn bộ "mycontent".

— TIMEX
nguồn

bản sao có thể có của Sử dụng fadein và append

— người dùng

262

$(html).hide().appendTo("#mycontent").fadeIn(1000);

— icktoofay
nguồn

1

Tôi chỉ muốn div "blah" mới mờ dần.

— TIMEX

@TIMEX: Đó là điều nên làm.

— icktoofay

Có lý do gì khiến bạn ẩn trước sau đó thêm vào (vì đặt kiểu trước khi gắn vào DOM sẽ nhanh hơn, hoặc tương tự như vậy) hay nó không tạo ra sự khác biệt?

— qwertymk

2

@qwertymk: Không có lý do thực sự. Nếu các trình duyệt đã từng hiển thị trong khi DOM vẫn đang được thao tác (điều mà hiện tại không có trình duyệt nào làm được theo như tôi biết), thì sẽ không có bất kỳ phần flash nào của nội dung trước khi nó bắt đầu mờ dần. Điều này không thực sự quan trọng.

— icktoofay

1

@ArthurTarasov: Điều đó xảy #blahra với chính nó, có vẻ như không phải là điều bạn muốn làm (và tôi đoán nó được hiểu là không cần chọn). Bạn cũng có thể chỉ cần bỏ .appendTomột phần và sử dụng $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Thêm một chút thông tin:

jQuery thực hiện "chuỗi phương thức", có nghĩa là bạn có thể chuỗi các cuộc gọi phương thức trên cùng một phần tử. Trong trường hợp đầu tiên:

$("#mycontent").append(html).fadeIn(999);

fadeIntrong trường hợp này, bạn sẽ áp dụng lệnh gọi đối tượng là đích của chuỗi phương thức #mycontent. Không phải những gì bạn muốn.

Trong câu trả lời (tuyệt vời) của @ icktoofay, bạn có:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Về cơ bản, điều này có nghĩa là, tạo html, đặt nó làm ẩn theo mặc định, nối nó vào #mycontentvà sau đó làm mờ nó vào. Mục tiêu của chuỗi phương thức bây giờ là hmtlthay vì #mycontent.

— Pablo Fernandez
nguồn

18

Điều này cũng hoạt động

$(Your_html).appendTo(".target").hide().fadeIn(300);

Trân trọng

— Mohd Sakib
nguồn

Đây là cách thẩm mỹ nhất làm hài lòng để xử lý mờ dần trong vì nó cho phép HTML để được sáng tác hoàn toàn và tạo ra các kích thước cần thiết trước khi mờ dần trong.

— Antonio Nogueras

0

vì fadeIn là sự chuyển đổi từ ẩn sang hiển thị, bạn sẽ phải ẩn phần tử "html" khi bạn nối nó và sau đó để hiển thị nó.

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

Mở rộng đoạn mã

— khủng hoảng
nguồn