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

Antworten:

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
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