jQuery fadeOut ohne Anzeige keine?

77

Gibt es eine Alternative zu fadeOut (), die keine Anzeige verwendet: keine für den Stil? Ich möchte nur die versteckte Sichtbarkeit verwenden, um Verschiebungen im Seitenlayout zu vermeiden.

jquery Kyle Rogers
quelle

Antworten:

118

Sie können mit .animate()auf dem opacitydirekt:

$(".selector").animate({ opacity: 0 })

Auf diese Weise nimmt das Element immer noch Platz ein, wie Sie es möchten. Es hat nur eine 0Deckkraft, sodass es praktisch genauso ist wie am visibility: hiddenEnde.

Nick Craver
quelle
12
Der Benutzer kann dennoch auf das Element ( z. B. einen Link) klicken. In diesem Fall möchten Sie möglicherweise die visibility: hidden;Rückruffunktion für die Fertigstellung oder ähnliches festlegen .
PleaseStand
Ich möchte das Element ausblenden, ohne die Anzeige auf keine zu setzen. Außerdem möchte ich nicht, dass das Element den Platz behält. Es sieht hässlich aus, wenn nichts auf der Seite ist, aber der Platz noch reserviert ist ...
Obaid Maroof
1
@ObaidMaroof das ist genau die Verhaltensanzeige: keine ist für ... Wenn Sie über das sofortige Ausblenden sprechen, das Sie nicht möchten, dann sind Sie hinter .fadeOut (), das anzeigt: keine nach einer Überblendung.
Nick Craver
69

Ja, es gibt eine Alternative. Es wird aufgerufen.fadeTo() , wo Sie die Zielopazität festlegen, die in Ihrem Fall sein wird 0.

$('element').fadeTo( 1000, 0 ); // fade to "0" with a 1000ms duration

Dies wird die displayEigenschaft am Ende nicht ändern .

user113716
quelle
3
Dies fügt keine Anzeige hinzu: keine, wenn auf 0 eingeblendet wird. Wenn Sie jedoch auf einen Wert über 0 einblenden, wird ein display: block erzwungen (zumindest wenn Sie display: none haben). Daher ändert es unter bestimmten Umständen tatsächlich die Anzeigeeigenschaft. Ich musste animate () verwenden, um dies zu vermeiden.
Jens
Aber was ist, wenn ich das Element ausblenden möchte, damit es nicht den Platz im Dokument einnimmt (wie Anzeige keine). Und das alles, ohne die Anzeige auf keine zu setzen.
Obaid Maroof
Dies funktionierte großartig, musste nur sowohl Fading zum Anzeigen als auch Fading zum Verbergen hinzufügen. $ ('# msgInfo'). fadeTo (0, 500); $ ('# msgInfo'). fadeTo (2000, 0);
Patrick
2

Eine Möglichkeit, dies zu tun, besteht darin, den Anzeigemodus und dann .fadeOut zu erfassen und im Endeffekt Ihre bevorzugte Methode zum Ausblenden auszuführen und die Anzeige auf den ursprünglichen Wert zurückzusetzen:

var $element = $('#selector');

var display = $element.css('display');
$element.fadeOut(500, function() {
   $element.css('visibility', 'hidden'); 
   $element.css('display', display);
}
friggle
quelle
2

Wenn Sie ausblenden möchten, ändern Sie dann den Inhalt und dann wieder einblenden :

$("#layer").animate({opacity: 0}, 1000, 'linear', function(){

    //Do here any changes to the content (text, colors, etc.)
    $("#layer").css('background-color','red'); //For example

    $("#layer").animate({opacity: 1}); //FadeIn again

});
jobima
quelle
Danke !! das hilft mir wirklich +1
CHINE Oussama
0

Beachten Sie, dass 

fadeTo(500, 0)   // fade out over half a second
fadeTo(0, 0)     // instantly hide

ist (seltsamerweise) nicht kompatibel mit 

fadeIn()

(wenn Sie es wieder zeigen möchten). Also, wenn Sie verwenden

fadeTo(500, 0)

Um etwas ohne CSS zu verstecken, display: nonemüssen Sie verwenden

fadeTo(500, 1)

um es wieder opacity: 0einzublenden oder es bleibt noch im CSS übrig und bleibt unsichtbar.

Simon_Weaver
quelle