Ich versuche, eine Reihe von Elementen zum Einblenden zu erhalten, wenn sie im Fenster vollständig sichtbar sind. Wenn ich weiter scrolle, möchte ich nicht, dass sie ausgeblendet werden, aber wenn ich nach oben scrolle, möchte ich, dass sie ausgeblendet werden.
Dies ist das nächste Spiel, das ich gefunden habe. Ссылка
%Vor%Es macht genau das, was ich möchte, wenn ich nach unten scrolle, aber ich möchte auch, dass die Elemente ausgeblendet werden, wenn ich an ihnen vorbei scrolle.
Ich habe das ohne Glück versucht.
%Vor%Vielen Dank, dass Sie sich die Zeit genommen haben, sich das anzusehen.
Der Grund, warum Ihr Versuch nicht funktioniert hat, ist, dass die beiden Animationen (Ein- und Ausblenden) gegeneinander funktionierten.
Kurz bevor ein Objekt sichtbar wurde, war es immer noch unsichtbar und die Animation zum Ausblenden würde laufen. Dann, den Bruchteil einer Sekunde später, als das gleiche Objekt sichtbar wurde, würde die Einblendungsanimation versuchen, zu laufen, aber die Ausblendung lief noch. Also würden sie gegeneinander arbeiten und du würdest nichts sehen.
Irgendwann würde das Objekt sichtbar werden (die meiste Zeit), aber es würde eine Weile dauern. Und wenn Sie mit der Pfeiltaste auf der Schaltfläche der Bildlaufleiste nach unten blättern würden, würde die Animation funktionieren, weil Sie in größeren Schritten blättern würden und weniger Bildlaufereignisse erstellen würden.
Genug Erklärung, die Lösung (JS, CSS, HTML):
if ($(this).css("opacity")==0) {...} . Dadurch wird sichergestellt, dass das Objekt nur eingeblendet wird, wenn opacity 0 ist. Gleiches gilt für das Ausblenden. Und das verhindert, dass Ein- und Ausblenden gegeneinander arbeiten, weil jetzt immer nur eines der beiden gleichzeitig auf einem Objekt läuft. .animate() in .fadeTo() geändert. Es ist jQuerys spezielle Funktion für Deckkraft, viel kürzer zum Schreiben und wahrscheinlich leichter als animieren. .position() in .offset() geändert. Dies berechnet sich immer relativ zum Körper, während die Position relativ zum Elternteil ist. Für Ihren Fall glaube ich, Offset ist der Weg zu gehen. $(window).height() in $(window).innerHeight() geändert. Letzteres ist meiner Erfahrung nach zuverlässiger. $(window).scroll(); auf. Jetzt können Sie alle gewünschten Objekte auf der Seite mit der .fade -Klasse versehen, und Objekte, die beim Seitenladen nicht sichtbar sein sollen, werden sofort ausgeblendet. #container sowohl von HTML als auch von CSS entfernt, weil (zumindest für diese Antwort) es nicht notwendig ist. (Ich dachte, du brauchst vielleicht height:2000px , weil du .position() anstelle von .offset() benutzt hast, sonst weiß ich es nicht. Fühle dich frei, es in deinem Code zu belassen.) Wenn Sie andere Deckkraftwerte als 0 und 1 verwenden möchten, verwenden Sie den folgenden Code:
threshold und für min/max erstellt. Im Rest der Funktion sind diese Variablen referenziert. Wenn Sie die Werte einmal ändern möchten, müssen Sie dies nur an einer Stelle tun. || pageLoad zur if-Klausel hinzugefügt. Dies war notwendig, um sicherzustellen, dass alle Objekte beim Laden der Seite in die richtige Deckkraft eingeblendet werden. pageLoad ist ein boolescher Wert, der als Argument gesendet wird, wenn fade() aufgerufen wird. function fade() {...} setzen, um mit dem pageLoad boolean, wenn der scroll-handler aufgerufen wird. Erläuterung:
Der Grund dafür, dass der Code in deiner Geige nicht funktioniert hat, ist, dass die Opazitätswerte immer gleich sind etwas abseits von dem Wert, auf den Sie es eingestellt haben. Wenn Sie also die Deckkraft auf 0.3 setzen, ist der tatsächliche Wert (in diesem Fall) 0.300000011920929 . Das ist nur einer dieser kleinen Fehler, die Sie auf dem Weg von Trail und Error lernen müssen. Deshalb funktioniert diese if-Klausel nicht: if ($(this).css("opacity") == 0.3) {...} .
Ich habe einen Schwellenwert hinzugefügt, um diesen Unterschied zu berücksichtigen: == 0.3 wird <= 0.31 .
(Ich habe den Schwellenwert auf 0.01 gesetzt, dies kann natürlich geändert werden, genauso wie solange die tatsächliche Deckkraft zwischen dem eingestellten Wert und diesem Schwellenwert liegt.)
Die Operatoren werden jetzt von == in <= und >= geändert.
Wenn Sie die Elemente basierend auf ihrem sichtbaren Prozentsatz ausblenden möchten, verwenden Sie den folgenden Code:
Ich habe Ihren Code ein wenig optimiert und ihn robuster gemacht. Im Hinblick auf die progressive Verbesserung ist es wahrscheinlich besser, die gesamte Einblendlogik in JavaScript zu haben. Im Beispiel von myfunksyde sieht jeder Benutzer ohne JavaScript nichts wegen opacity: 0; .
Siehe hier: Ссылка
Prost, Martin
Ich weiß, es ist spät, aber ich nehme den Originalcode und ändere ein paar Sachen, um das CSS leicht zu steuern. Also habe ich einen Code mit der addClass () und der removeClass ()
erstelltHier der vollständige Code: Ссылка
%Vor%Entschuldigung, das ist ein alter Thread, aber einige Leute würden das immer noch brauchen, denke ich,
Hinweis: Ich habe dies mithilfe der Animate.css-Bibliothek zum Animieren der Überblendung erreicht.
Ich habe deinen Code benutzt und einfach die .hidden class hinzugefügt (benutze die versteckte Klasse von bootstrap), aber du kannst einfach nur definieren
.hidden { opacity: 0; }
Noch ein Hinweis: Wenn Sie dies auf Container anwenden, kann dies zu Störungen führen.
Tags und Links javascript jquery scroll fade