Menambahkan elemen dengan efek fade [jQuery]

121

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

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

Ini sepertinya tidak berhasil.

Saya hanya ingin efek keren saat konten ditambahkan.

Catatan: Saya hanya ingin div "blah" baru saja yang memudar, bukan seluruh "konten saya".

— TIMEX
sumber

kemungkinan duplikat Menggunakan fadein dan tambahkan

— pengguna

262

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

— icktoofay
sumber

1

Saya hanya ingin div "bla" yang baru muncul.

— TIMEX

@TIMEX: Itu yang harus dilakukan.

— icktoofay

Apakah ada alasan Anda pertama-tama menyembunyikan lalu menambahkan (karena lebih cepat menyetel gaya terlebih dahulu sebelum melampirkan ke DOM, atau semacamnya) atau tidak ada bedanya?

— qwertymk

2

@qwertymk: Tidak ada alasan sebenarnya. Jika browser pernah dirender saat DOM masih dimanipulasi (yang sejauh ini tidak dilakukan browser sejauh yang saya tahu), tidak akan ada flash konten sebelum mulai memudar. Sekali lagi, tidak terlalu penting.

— icktoofay

1

@ArthurTarasov: Itu ditambahkan #blahke dirinya sendiri, yang sepertinya bukan sesuatu yang ingin Anda lakukan (dan saya rasa itu ditafsirkan sebagai no-op). Sebaiknya lepaskan saja .appendTobagian tersebut dan gunakan $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Menambahkan lebih banyak info:

jQuery mengimplementasikan "method chaining", yang berarti Anda dapat merantai panggilan metode pada elemen yang sama. Dalam kasus pertama:

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

Anda akan menerapkan fadeInpanggilan ke objek yang merupakan target rantai metode, dalam kasus ini #mycontent. Bukan yang kamu inginkan.

Dalam jawaban (hebat) @ icktoofay, Anda memiliki:

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

Ini pada dasarnya berarti, buat html, setel sebagai tersembunyi secara default, tambahkan ke #mycontentdan kemudian fade in. Target dari rantai metode sekarang adalah hmtlsebagai ganti #mycontent.

— Pablo Fernandez
sumber

18

Ini juga berhasil

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

Salam

— Mohd Sakib
sumber

Ini adalah cara yang paling estetis untuk menangani fading in karena memungkinkan HTML tersusun sepenuhnya dan menciptakan dimensi yang dibutuhkan sebelum fading in.

— Antonio Nogueras

0

karena fadeIn adalah transisi dari sembunyikan ke tampilan, Anda harus menyembunyikan elemen "html" saat menambahkannya lalu menampilkannya.

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

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

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

Luaskan cuplikan

— Cristisst
sumber