Ich lasse die Fußzeile aktuell erscheinen, wenn die Seite einen festgelegten Punkt durchlaufen hat, möchte sie aber offen legen, während der Benutzer scrollt, anstatt nur auf dem Bildschirm zu erscheinen (wie es gerade der Fall ist).
Es wäre interessant zu wissen, ob es mit CSS-Übergängen oder Best Practice erreicht werden kann.
Live-Beispiel Ссылка
CSS
%Vor%JS
%Vor%HTML
%Vor%Sie können Folgendes tun, das CSS-Übergänge verwenden würde
Wir möchten eine Klasse abhängig von der Bildlaufposition aus der Fußzeile hinzufügen oder entfernen
%Vor% Zeigen oder verbergen Sie anschließend die Fußzeile basierend auf dem Vorhandensein der show -Klasse. Wir können CSS-Übergänge verwenden, um die Änderung zu animieren
Wie Sie oben sehen können, ändern wir die Höhe der Fußzeile, wenn Sie sie zeigen. % Co_de% verhindert, dass der Inhalt der Fußzeile angezeigt wird, wenn die Höhe 0 ist.
Mit dieser Methode können Sie auch die Fußzeile einblenden, indem Sie Deckkraftwerte festlegen oder eine Änderung in der Farbe animieren.
Sie können die Fußzeile mit fadeIn () und fadeOut () jQuery-Effekte.
%Vor%Wenn Sie tief genug in diese Effekte eintauchen, werden Sie feststellen, dass beide animate () Effekte mit Opazität verwenden.
Ich hatte Spaß daran, mit deinem Problem zu experimentieren, und ich habe niemanden gesehen, der das versucht hat ( Fiddle ):
%Vor%Diese Lösung blendet auch die Fußzeile aus, wenn der Benutzer zurück scrollt.
Es gibt einen großen Nachteil dieser Lösung: Weil es die Methode fadeTo() verwendet, wird die Unterstützung in IE extrem begrenzt sein (tatsächlich wird es in den meisten IE Versionen kaputt gehen) - ich kann mich nicht erinnern, was die Unterstützung für 9 ist und 10). Sie können dies umgehen, indem Sie eines von etwa zwölf Plugins / Fixes verwenden, um Unterstützung für die Animation der opacity -Eigenschaft in IE hinzuzufügen, und diese Lösung entsprechend ändern (mit animate() anstelle von fadeTo() ).
Lass es mich wissen, wenn du irgendwelche Fragen hast. Viel Glück! :)
JQuery & amp; Animationen
Für so etwas würde ich empfehlen, einen Kombinationseffekt aus Folie und Fade zu verwenden. Es ist viel natürlicher und daher nicht der Benutzer beim Auftauchen.
Die arbeitende Geige: Ссылка
Das entsprechende Code-Snippet (nicht in der Geige verwendet, aber hier, um zu demonstrieren, wie man dies mit den Best Practices für die Codierung macht):
%Vor%Best Practices
Im Hinblick auf Best Practices finden Sie einen sehr netten Beitrag über benutzerdefinierte Animationen und wie Sie sie wiederverwendbar schreiben können hier .
Es gibt keine "jquery footer animation" Best Practices als solche, zumindest die, die ich kenne, aber Sie können von beliebten, gut gestalteten Websites lernen, um zu wissen, was funktioniert und was nicht. Beispiele hierfür wären nicht gut, da dies von der Art und dem Kontext Ihrer Website abhängt.
CSS
Ich würde CSS-Übergänge nicht raten, da die Spezifikationen nicht finalisiert sind (offizielle Entwürfe, Diskussionen finden Sie hier ).
Sie sind auch nicht Cross-Browser-kompatibel, insbesondere w.r.t. ältere Browser Aber andererseits, das ist nur meine Meinung.
Tags und Links jquery css-transitions sticky-footer