So blenden Sie ein, um anzuzeigen: Inline-Block

98

Auf meiner Seite befinden sich einige (ca. 30) Dom-Knoten, die unsichtbar hinzugefügt werden sollten und eingeblendet werden, wenn sie vollständig geladen sind.
Die Elemente benötigen eine Anzeige: Inline-Block-Stil.

Ich möchte die Funktion jquery .fadeIn () verwenden. Dies erfordert, dass das Element zunächst eine Anzeige hat: keine; Regel, um es zunächst zu verstecken. Nach dem fadeIn () haben die Elemente natürlich die Standardanzeige: erben;

Wie kann ich die Überblendfunktion mit einem anderen Anzeigewert als "Erben" verwenden?

jquery fade Boris Callens
quelle

Antworten:

39

Sie können die Animationsfunktion von jQuery verwenden, um die Deckkraft selbst zu ändern und die Anzeige unberührt zu lassen.

Philnash
quelle
Ich mag diese Lösung besser, hält das CSS von meinem JS fern.
Joshuadelange
14
@ Joshuadelange nicht wirklich, Deckkraft ist auch CSS
Roy
+1 für die Fokussierung des Konstruktionsprozesses zum Anzeigen / Verstecken von Elementen darauf, wo sie sein sollten.
Klewis
232

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

MakuraYami
quelle
5
Dies ist definitiv die bessere Antwort.
Jason
25
Gute Antwort! Noch besser, Sie können es leer lassen, um standardmäßig alles zu verwenden, was Sie in Ihrem CSS haben:$("div").fadeIn().css("display","");
Brandon Durham
1
Dies sollte wirklich die akzeptierte Antwort sein; Die vorhandene akzeptierte Antwort ist eher ein Kommentar.
Unheimlicher Bart
$("div").fadeIn("400", function(){ $(this).css("display","inline-block"); });um sicher zu sein, dass Anzeige: Inline-Block ist fertig, wenn das Fadein beendet ist
Simon
es funktioniert bei mir nicht ... angewendet auf ein div mit einem anfänglichen Anzeigestil, der mit einer Klasse auf none gesetzt ist. Wenn ich das Element untersuche, sehe ich, dass es einige Millisekunden lang, direkt nach dem Aufruf von fadeIn, einen Inline-Block in seinem Stil hat, dann wird style auf block gesetzt. mit Simon Vorschlag ist der Effekt nicht schön, da während des Einblendens das Element als Block angezeigt wird
Giox
11

Um Phils gute Idee zu konkretisieren, hier ein fadeIn (), das Fades in jedes Element mit der Klasse .faded lädt, die wiederum in animate () konvertiert wurde:

Alt:

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

Neu:

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

Hoffe das hilft einem anderen jQuery-Neuling wie mir :) Wenn es einen besseren Weg gibt, sag es uns bitte!

Bloße Entwicklung
quelle
9

Makuras Antwort hat bei mir nicht funktioniert, also war meine Lösung

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

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

hidedisplay: noneWird sofort angewendet , speichert jedoch zuvor den aktuellen Anzeigewert im jQuery-Datencache, der durch die nachfolgenden Animationsaufrufe wiederhergestellt wird.

Die divStarts sind also statisch definiert als display: none. Dann wird es auf gesetzt inline-blockund sofort ausgeblendet, um wieder eingeblendet zu werdeninline-block

Clodoaldo Neto
quelle
2

Laut den jQuery-Dokumenten für .show(),

Wenn ein Element den Anzeigewert Inline hat, dann ausgeblendet und angezeigt wird, wird es erneut inline angezeigt.

Meine Lösung für dieses Problem bestand darin, eine CSS-Regel auf eine Klassenanzeige anzuwenden: Inline-Block auf das Element, dann fügte ich eine weitere Klasse namens "hide" hinzu, die display anwendet: none; Als ich .show()auf dem Element war, zeigte es Inline.

amurrell
quelle
Ich würde annehmen, dass dies auch funktionieren sollte, wenn Sie setzen #el{display:inline-block;display:none;}und dann ausführen, erhalten $('#el').fadeIn();Sie Inline-Block. Aber das tut es nicht.
Fanky
0

Dies funktioniert auch mit display:nonePreset von CSS. Verwenden

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

(und auch $('#element').fadeOut().removeClass('displaytype');)

mit Setup in CSS:

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

Ich halte dies für eine Problemumgehung, da ich glaube fadeIn(), dass sie funktionieren sollte, damit nur die letzte Regel entfernt wird - display:nonewenn #element{display:inline-block;display:none;}diese Option aktiviert ist, werden jedoch beide fehlerhaft entfernt.

Fanky
quelle