Gibt es eine Alternative zu fadeOut(), die keine Anzeige verwendet: keine für den Stil? Ich möchte nur die Sichtbarkeit ausblenden, um Verschiebungen im Seitenlayout zu vermeiden.jQuery fadeOut ohne Anzeige keine?
Sie .animate() auf die opacity direkt verwenden können:
$(".selector").animate({ opacity: 0 })
diese Weise wird das Element immer noch Raum einnimmt wie Sie wollen, es hat nur eine 0 Opazität, also ist es effektiv das gleiche wie es visibility: hidden zu sein, wenn es endet.
Benutzerdefinierte Animation ist eine Alternative
.animate({opacity: 0.0}, 5000, 'linear', callback);
Ja, es eine Alternative ist. It's called .fadeTo(), wo Sie die Zielopazität einstellen, die in Ihrem Fall 0 ist.
$('element').fadeTo(1000, 0); // fade to "0" with a 1000ms duration
Dies wird die display Eigenschaft am Ende nicht ändern.
Dies fügt keine Anzeige hinzu: keine, wenn auf 0 geblendet wird, aber wenn Sie auf einen Wert über 0 blenden, erzwingt es eine Anzeige: Block (zumindest wenn Sie Anzeige haben: keine).In der Tat ändert sich die Anzeigeeigenschaft unter bestimmten Umständen. Ich musste animate() verwenden, um dies zu vermeiden. – Jens
Aber was, wenn ich das Element verstecken möchte, damit es den Platz im Dokument nicht besetzt (wie Anzeige keine). Und das alles ohne die Anzeige auf keine zu setzen. –
Das funktionierte großartig, ich musste nur Fading hinzufügen, um zu zeigen und Fading zu verstecken. $ ('# msgInfo'). fadeTo (0, 500); $ ('# msgInfo'). FadeTo (2000, 0); –
Eine Möglichkeit, dies zu tun ist, um den Anzeigemodus zu erfassen, dann .fadeOut, und in den vollständigen, machen Sie Ihre bevorzugte Methode des Versteckens, und stellen Sie die Anzeige zurück zu dem, was es war:
var $element = $('#selector');
var display = $element.css('display');
$element.fadeOut(500, function() {
$element.css('visibility', 'hidden');
$element.css('display', display);
}
Hinweis dass
fadeTo(500, 0) // fade out over half a second
fadeTo(0, 0) // instantly hide
ist (seltsam) nicht mit
kompatibelfadeIn()
(wenn Sie es noch einmal zeigen wollen). Also, wenn Sie mit
fadeTo(500, 0)
um etwas ohne die CSS zu verstecken display: none dann müssen Sie
fadeTo(500, 1)
es zu verblassen zurück oder es wird nach wie vor haben opacity: 0 übrig in der CSS und wird unsichtbar bleiben.
ich Sie wollen fadeOut, dann den Inhalt ändern und dann fadeIn wieder:
$("#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
});
Danke !! das hilft mir wirklich +1 –
Der Benutzer kann weiterhin auf das Element klicken (* zB * a link) aber in diesem Fall sind Sie könnte in der Rückmeldungs-Callback-Funktion oder ähnlichem 'visibility: hidden;' setzen. – PleaseStand
Ich möchte das Element ausblenden, ohne die Anzeige auf keine einzustellen. Außerdem möchte ich nicht, dass das Element den Platz behält, es sieht hässlich aus, wenn es nichts auf der Seite gibt, aber der Platz ist immer noch reserviert ... –
@ObaidMaroof das ist genau die Verhaltensanzeige: keine ist für ... Wenn du sprichst über das Instant-Hide, das du nicht willst, dann bist du hinter .fadeOut(), was anzeigt: keine * nach * einem Fade. –