jquery fade element zeigt keine Elemente an, die als "Sichtbarkeit: versteckt" bezeichnet werden.

72

Ich habe eine Reihe von Miniaturansichten, die ich mit einem Stil visibility: hidden;lade, damit alle ihre korrekten Layouts beibehalten. Sobald die Seite vollständig geladen ist, habe ich eine Abfragefunktion, die sie einblendet. Dies funktionierte, als ihr Stil eingestellt war, display: none;aber offensichtlich war das Layout dann durcheinander . Irgendwelche Vorschläge?

Hier ist die Fade-Linie:

$('.littleme').fadeIn('slow');

jquery visibility fadein

— Kalpaitch
quelle

153

Fügen Sie der Kette einige Aufrufe wie folgt hinzu:

 $('.littleme').css('visibility','visible').hide().fadeIn('slow');

Dadurch wird es display:nonefür 1 Frame geändert, bevor es eingeblendet wird und der Bereich wieder belegt wird.

— Nick Craver
quelle

Prost funktioniert gut. Keine merkliche Verzögerung oder Verschiebung in diesem 1 Frame.

— Kalpaitch

2

und umgekehrt : $('.littleme').fadeOut(speed,function(){$('.littleme').css("visibility","hidden").css("display","");});:-)

— eruciform

5

@eruciform - um das display: noneam Ende zu eliminieren , können Sie einfach tun $('.littleme').fadeTo(speed, 0);, was displayam Ende nicht eingestellt wird , den gleichen Effekt mit weniger Arbeit :)

— Nick Craver

2

$('.littleme').fadeTo(speed, 0, function(){ $(this).hide();});zum Einstellen display:nonenach der Animation. danke @NickCraver für das Original-Snippet :)

— StrikeForceZero

27

Versuchen Sie es mit Deckkraft und animate():

$('.littleme').css('opacity',0).animate({opacity:1}, 1000);

— David Hellsing
quelle

Ich bin immer ein bisschen müde, Opazität in Bezug auf CSS wegen IE zu verwenden. Vermutlich erledigt jquery das ohne Probleme ???

— Kalpaitch

Dies funktioniert nicht, da es immer noch nicht sichtbar ist. Testen Sie es selbst.

— Nick Craver

1

Natürlich müssen Sie die Sichtbarkeit entfernen: versteckt. Und ja, jQuery behandelt das Opazitätsproblem im IE.

— David Hellsing

Rand Fall. Wenn sich in einem Wrapper für Deckkraft: 0 Iframe-Inhalte befinden, kann jquery dies nicht für den IE animieren. Sie können filter: inherit verwenden, um dieses Problem zu beheben. Wenn der Iframe jedoch außerhalb Ihrer Kontrolle liegt (dh Widgets für die gemeinsame Nutzung von sozialen Netzwerken), müssen Sie möglicherweise die ausgenommene Antwort verwenden.

— Paul T

10

<span style="opacity:0;">I'm Hidden</span>

Zeigen : $('span').fadeTo(1000,1)

Verstecken : $('span').fadeTo(1000,0)

Der Platz bleibt im DOM-Layout erhalten

http://jsfiddle.net/VZwq6/

— Nutzer
quelle

1

Da die Deckkraft in IE <9 nicht unterstützt wird und ich mit einem unsichtbaren Zustand beginnen möchte, habe ich diese Lösung mit github.com/bladeSk/internet-explorer-opacity-polyfill

— Chris Marisic

1

Können Sie nicht stattdessen fadeTo (Dauer, Wert) verwenden? Sicherlich können Sie auf diese Weise auf 0 und 1 verblassen, so dass Sie den Dokumentenfluss nicht beeinflussen ...

— Neil
quelle

0

Versuchen Sie, das versteckte Element abzugleichen?

$ (". littleme: hidden"). fadeIn ();

— iivel
quelle