Görüntülenmek için nasıl soluk: satır içi blok

98

Sayfamda, görünmez eklenmesi gereken ve tam olarak yüklendiğinde kaybolan bir grup (yaklaşık 30) dom düğümüm var.
Öğelerin bir ekrana ihtiyacı vardır: satır içi blok stili.

Jquery .fadeIn () işlevini kullanmak istiyorum. Bu, öğenin başlangıçta bir ekrana sahip olmasını gerektirir: yok; başlangıçta gizleme kuralı. FadeIn () 'den sonra elbette dışındaki öğeler varsayılan ekrana sahip olur: miras;

Soldurma işlevini devralma dışında bir görüntü değeriyle nasıl kullanabilirim?

jquery fade

— Boris Callens
kaynak

39

Sen jQuery'nin kullanabilirsiniz hareketlendirmek etkilenmemiş ekran bırakarak donukluk kendinizi değiştirmeye işlevini.

— Philnash
kaynak

Bu çözümü daha çok seviyorum, CSS'yi JS'mden uzak tutuyorum.

— joshuadelange

14

@joshuadelange gerçekten değil, opaklık da CSS'dir

— Roy

Seçimleri nerede olması gerektiği üzerinde gösterme / gizleme mühendislik sürecine odaklanmak için +1.

— klewis

233

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

— MakuraYami
kaynak

5

Bu kesinlikle daha iyi cevap.

— Jason

25

Mükemmel cevap! Daha da iyisi, CSS'nizde sahip olduğunuz her $("div").fadeIn().css("display","");

— Brandon Durham

1

Bu gerçekten kabul edilen cevap olmalı; mevcut kabul edilen cevap daha çok bir yorumdur.

— Sinister Beard

$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });şu görüntülendiğinden emin olmak için: inline-block, fadein bittiğinde yapılır

— Simon

benim için çalışmıyor ... bir sınıf kullanarak sıfıra ayarlanmış bir başlangıç görüntüleme stili ile bir div üzerine uygulandı. Öğeyi incelerken, fadeIn'i çağırdıktan hemen sonra birkaç milisaniye için kendi tarzında satır içi bloğu olduğunu, ardından stilin blok olarak ayarlandığını görüyorum. Simon'un önerisi ile efekt,

— solma

11

Phil'in iyi fikrini açıklığa kavuşturmak için, işte her öğeye fades'i. Sırayla .faded olacak şekilde yükleyen ve animate () 'e dönüştüren bir fadeIn ():

Eski:

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

Yeni:

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

Umarım benim gibi başka bir jQuery yenisine yardımcı olur :) Bunu yapmanın daha iyi bir yolu varsa, lütfen bize bildirin!

— Sadece Geliştirme
kaynak

9

Makura'nın cevabı benim için işe yaramadı, bu yüzden çözümüm

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

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

hidehemen uygulanır, display: noneancak bundan önce, sonraki animasyon çağrıları tarafından geri yüklenecek olan jQuery veri önbelleğine mevcut görüntü değerini kaydeder.

Yani divbaşlangıçlar statik olarak display: none. Sonra ayarlandı inline-blockve hemen gizlenecekinline-block

— Clodoaldo Neto
kaynak

2

Göre jQuery docs için .show(),

Bir öğe satır içi görüntü değerine sahipse, o zaman gizlenir ve gösterilir, bir kez daha satır içi olarak görüntülenecektir.

Bu yüzden bu soruna çözümüm, bir sınıf görüntüsüne bir css kuralı uygulamaktı: öğeye inline-block, ardından display: none; Öğeye geldiğimde .show(), satır içi gösterdi.

— Amurrell
kaynak

Bunun, inline-bloğu ayarlayıp #el{display:inline-block;display:none;}çalıştırdığınızda da çalışacağını varsayıyorum $('#el').fadeIn();. Ama öyle değil.

— Fanky

0

Bu display:none, css tarafından önceden ayarlanmış olsa bile çalışır . Kullanım

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

(ve ayrıca $('#element').fadeOut().removeClass('displaytype');)

CSS'de kurulum ile:

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

Bunu fadeIn(), işe yaraması gerektiğine inandığım için bir geçici çözüm olarak düşünüyorum , böylece sadece son kuralı kaldıracak - display:noneayarlandığında, #element{display:inline-block;display:none;}ancak her ikisini de hatalı bir şekilde kaldırıyor.

— Fanky
kaynak