Cara memudar untuk ditampilkan: blok sebaris

98

Di halaman saya, saya memiliki banyak (sekitar 30) node dom yang harus ditambahkan tidak terlihat, dan memudar ketika sudah penuh.
Elemen membutuhkan tampilan: gaya blok sebaris.

Saya ingin menggunakan fungsi jquery .fadeIn (). Ini mengharuskan elemen awalnya memiliki display: none; aturan untuk awalnya menyembunyikannya. Setelah fadeIn () elemen tentunya memiliki tampilan default: inherit;

Bagaimana cara menggunakan fungsionalitas fade dengan nilai tampilan selain inherit?

jquery fade

— Boris Callens
sumber

39

Anda dapat menggunakan fungsi animate jQuery untuk mengubah opacity sendiri, membiarkan tampilan tidak terpengaruh.

— philnash
sumber

Saya lebih menyukai solusi ini, menjauhkan CSS dari JS saya.

— joshuadelange

14

@joshuadelange tidak juga, opacity juga CSS

— Roy

1 untuk memfokuskan proses rekayasa menampilkan / menyembunyikan elemen di tempat yang seharusnya.

— klewis

233

$("div").fadeIn().css("display","inline-block");

— MakuraYami
sumber

5

Ini pasti jawaban yang lebih baik.

— Jason

25

Jawaban yang bagus! Lebih baik lagi, Anda dapat membiarkannya kosong untuk default ke apa pun yang Anda miliki di CSS Anda:$("div").fadeIn().css("display","");

— Brandon Durham

1

Ini harus menjadi jawaban yang diterima; jawaban yang diterima yang ada lebih merupakan komentar.

— Sinister Beard

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });untuk memastikan bahwa tampilan: blok-sebaris selesai saat fadein selesai

— Simon

itu tidak berhasil untuk saya ... diterapkan pada div dengan gaya tampilan awal yang disetel ke none menggunakan kelas. Memeriksa elemen Saya melihat bahwa selama beberapa milidetik, tepat setelah memanggil fadeIn, ia memiliki blok-inline dalam gayanya, lalu gaya disetel ke blokir. dengan saran Simon efeknya tidak bagus, karena selama elemen fadeIn ditampilkan sebagai blok

— Giox

11

Hanya untuk menyempurnakan ide bagus Phil, berikut adalah fadeIn () yang memuat fades di setiap elemen dengan kelas .faded pada gilirannya, dikonversi menjadi animate ():

Tua:

$(".faded").each(function(i) {
    $(this).delay(i * 300).fadeIn();
});

Baru:

$(".faded").each(function(i) {
    $(this).delay(i * 300).css('opacity',0).animate({'opacity': 1}, 500);
});

Semoga dapat membantu newb jQuery lain seperti saya :) Jika ada cara yang lebih baik untuk melakukannya, beri tahu kami!

— Hanya Pembangunan
sumber

9

Jawaban Makura tidak berhasil untuk saya, jadi solusi saya adalah

<div id="div" style="display: none">Some content</div>

$('#div').css('display', 'inline-block').hide().fadeIn();

hide segera berlaku display: none tetapi sebelum itu menyimpan nilai tampilan saat ini di cache data jQuery yang akan dipulihkan oleh panggilan animasi berikutnya.

Jadi divawal secara statis didefinisikan sebagai display: none. Kemudian itu diatur ke inline-blockdan segera disembunyikan hanya untuk memudar kembali keinline-block

— Clodoaldo Neto
sumber

2

Menurut dokumen jQuery untuk .show(),

Jika sebuah elemen memiliki nilai tampilan sebaris, kemudian disembunyikan dan ditampilkan, itu sekali lagi akan ditampilkan sebaris.

Jadi solusi saya untuk masalah ini adalah dengan menerapkan aturan css ke kelas display: inline-block pada elemen tersebut, lalu saya menambahkan kelas lain yang disebut "hide" yang menerapkan display: none; Ketika saya .show()di elemen, itu menunjukkan sebaris.

— amurrell
sumber

Saya akan berasumsi bahwa ini juga harus berfungsi ketika Anda mengatur #el{display:inline-block;display:none;}dan kemudian menjalankan $('#el').fadeIn();Anda mendapatkan blok-inline. Tapi ternyata tidak.

— Fanky

0

Ini bekerja bahkan dengan display:nonepreset oleh css. Menggunakan

$('#element').fadeIn().addClass('displaytype');

(dan juga $('#element').fadeOut().removeClass('displaytype');)

dengan penyiapan di CSS:

#element.displaytype{display:inline-block;}

Saya menganggap ini solusi karena saya yakin fadeIn()harus berfungsi sehingga itu hanya akan menghapus aturan terakhir - display:noneketika diatur ke #element{display:inline-block;display:none;}tetapi tidak berfungsi menghapus keduanya.

— Fanky
sumber